[slick.js]収まってるはずなのにはみ出す場合の対処法

なんだろうねこれ。

症状

slick.jsを使った。一見動作に問題はない。

レスポンシブ運用なのでブラウザ幅をいじってたら、一定のところまで狭めた辺りで幅が縮小されず、ブラウザ幅が100vwを超えた。そこからさらに狭めると直ったんで、一定の幅においてのみ発生する。検証を確認するに、slick.jsで指定するラッピング要素は問題なく、生成される.slick-listにmax-width、widthとかで短い幅を指定すると収まる。.slick-track以下を削除しても整うので、このあたりが問題っぽい。

対処

こう。

.slick-list{
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}
.slick-list .slick-track{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

!importantを付けなくても、ラッピング要素ごと指定しても上書きできるんでどっちでもいい。まあ、基本的に普通に動作するわけで、全てのslick.jsを対象にするのは違うと思う。

これはラッピング要素に実数を指定してる場合なのでheight:100%;が使えた。高さがなければ領域が確保できないので汎用性的にはいまいち。

普段起きない症状なので、放り込んだ先の組み方と食い合わせが悪いんだと思う。だから本当はそっちを調整すべきだと思うんだけど、でも別に何も思い当たる節がないのですげーめんどくさい。なので、あんまり良くないけど、slick.js側をあわせたという形。