[slick.js]バグってページ幅がめっちゃ長くなった場合の対処法

一発で直せる。

バグという仕様

display:flex;とかdisplay:grid;とかでレイアウトを組んだ中にslick.jsを入れると壊れることがある。

スライド要素を格納してる.slick-trackの幅が、absoluteを無視してページ自体に影響してるっぽい。多分。

使い方によってはそういう事が起きる。起きないこともある。どちらにせよごく一般的な組み方をしてるにも関わらず、って感じなので、なっちゃったらどうしようもない。そんな感じ。

これ。

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

slick.jsが生成する内容だけが原因でないらしく、だから全体に掛かるようにする。

逆に之が悪影響するケースは今のところ巡り合ったことがないので、リスクはないはず。

こんなのがあったとする。

<div class="set">
    <div class="img"><div class="slick">【中身】</div></div>
    <div class="txt"></div>
</div>

で、こう。

.set{
    display: flex;
    flex-direction: row;
}
.set > div{
    flex: 1;
}

前述の通り、この状態だとslickが壊れる。

これでいけた。

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

display:flex;を指定した要素の子要素以下に振ったらいいみたい。