slick.jsの横幅が限界突破してしまう不具合、犯人はflexboxさんでした

備忘録です。

それはある日、いつものようにslick.jsを使ってスライダーを実装しようとした時のことでした。

いつもと同じはずのスライダーが・・・限界突破しとる！

こんなイメージです↓

slick.cssやslick-theme.css等のCSSを読み込み忘れた時の症状と似ているのですが、確認したところCSSは問題なく読み込んでいました。

例によってGoogle先生に助けを求めたところ、やっぱり同じ症状で困っている人がいますねぇ・・・

今回は以下のサイトを参考にさせて頂きました。

偉大な先人に感謝を（こいついっつも感謝してんな）。

https://blog.megefeps.info/20230522/slick-js%E3%83%90%E3%82%B0%E3%81%A3%E3%81%A6%E3%83%9A%E3%83%BC%E3%82%B8%E5%B9%85%E3%81%8C%E3%82%81%E3%81%A3%E3%81%A1%E3%82%83%E9%95%B7%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AE/

つまり、スライダーの親要素にdisplay: flex; が掛かっていると、レイアウトが限界突破するようです。

（display:grid; でもレイアウトが崩れるようです）

ソースだとこういう感じ↓

・html

<div class="container">
    <div class="content">
        <ul class="slider">
            <li class="slide-item">スライド1</li>
            <li class="slide-item">スライド2</li>
            <li class="slide-item">スライド3</li>
        </ul>
    </div>
    <aside class="sidebar">
        <p>サイドバー</p>
    </aside>
</div>

・css

.container {
	display: flex;
}

例としてざっくり書きましたが、このような形だと宜しくないのです。

これを回避するために、display: flex; になっている要素の子要素に以下のCSSを反映させます。

.container * {
    min-height: 0;
    min-width: 0;
}

「*」自体にCSSを記述している事例もあったのですが、さすがに全体に掛けるのは抵抗があります・・・。

かといって、「.content *」にCSSを効かせても改善しなかったので、「display: flex; にしている要素以下」にしないといけないようです。

前にも同じ問題で引っかかってしまったのですが、すっかり忘れていたので、今回改めて備忘録でした。

意外とこの症状にぶち当たることは少ないので、また忘れるんだろうな（笑）