Grid(Flex)配下のslick.jsが、バグって横幅が異常に伸びる時の解決方法

「slick.js」でスライダーを実装した際、display: grid;やdisplay: flex;要素の配下だと、slickの横幅が異常に伸びるバグに遭遇しました。デモコードを交えつつ、その解決方法を解説します。

jQueryスライダーの定番「slick」が、盛大にバグって表示される事象に遭遇しました。

スライダー本体の横幅が親要素の幅を突破し、数万ピクセルにも伸びちゃいました。ブラウザの横スクロールバーがメッチャ小さくなっててビックリした。

最初に結論を言うと、slickが入っているコンテナの親要素がgrid（グリッドレイアウト）の場合、その子要素にmin-width: 0;とmin-height: 0;を一括設定することで解決します。

.main-wrapper {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 30px;

    /* 以下を設定 */
    > * {
        min-width: 0;
        min-height: 0;
    }
}

原因は親要素のグリッドレイアウト(display: grid;)

原因は、slickが入っている親要素にdisplay: grid;やdisplay: flex;が指定されていると発生する……ことがあるらしい。

バグったコード

.main-wrapper {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 20px;
}

display: grid;でmain要素とaside要素を左右のカラムに分けたレイアウト

<div class="main-wrapper">
    <main>
        <div class="js-slick-slider">
            <img src="./slider1.jpg" alt="">
            <img src="./slider2.jpg" alt="">
            <img src="./slider3.jpg" alt="">
        </div>
    </main>

    <aside>
        ～内容～
    </aside>
</div>

定番のレイアウトだが、これだとslickがバグる

実は直近の案件でもgrid配下にslickスライダーを搭載したけど、こちらでは問題は発生しませんでした。どうやら、スライドの親要素の幅が固定値なのか、1frなのかなど、発生条件にはいくつかのバリエーションがあるみたい。

少なくとも、長年slick.jsを使っていて、今回初めてこの問題に遭遇しました。今のスライダーって、大体は画面幅いっぱいまで伸ばすデザインが多いので、グリッドカラムで並んだ子要素内に、slickを入れる機会が意外と少なかったみたいです。

それと昨今、CSSが進化しすぎて、slickの仕様として想定外のCSS構成が増えていることも、今回の原因だと思う。

対処方法はmin-width: 0;とmin-height: 0;

対処方法としては、slickが入っているgridやflexの子要素に、min-width: 0;とmin-height: 0;を一括で設定すると解消します。

.main-wrapper > * {
    min-width: 0;
    min-height: 0;
}

CSSの個別対応が面倒だと感じる人は、root要素から一括で「*」指定しているみたいだけど、流石に影響範囲が広すぎて、どんな副作用があるか分かったもんじゃないので、必要最低限、slickを使用している範囲に限定しました。また、このCSS自体もslickを使用しているページのみ出力されるように、PHPのif文で調整しました。

最初は、gridで指定したカラムの直下にslickが入っていることがバグの原因だろうと考え、「間にdivでも何でも一つ挟めば大丈夫だろう」と軽く考えていましたが、それでも解消しなかったです。原因は結構複雑な模様。

コーディング中、同じようにslickで謎のバグに遭遇した人は参考にしてください。長年使い続けて安定していたライブラリが突然盛大にバグると、ビビるよね。何事かと思ったわ。