備忘録です。
それはある日、いつものようにslick.jsを使ってスライダーを実装しようとした時のことでした。
いつもと同じはずのスライダーが・・・限界突破しとる！
こんなイメージです↓
slick.cssやslick-theme.css等のCSSを読み込み忘れた時の症状と似ているのですが、確認したところCSSは問題なく読み込んでいました。
例によってGoogle先生に助けを求めたところ、やっぱり同じ症状で困っている人がいますねぇ・・・
今回は以下のサイトを参考にさせて頂きました。
偉大な先人に感謝を（こいついっつも感謝してんな）。
[slick.js]バグってページ幅がめっちゃ長くなった場合の対処法
一発で直せる。
blog.megefeps.info
つまり、スライダーの親要素に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; にしている要素以下」にしないといけないようです。
前にも同じ問題で引っかかってしまったのですが、すっかり忘れていたので、今回改めて備忘録でした。
意外とこの症状にぶち当たることは少ないので、また忘れるんだろうな（笑）
