[slick.js]flex-boxにslick.jsを入れるとバグる

壊れる。

経緯
対処法

経緯

flexで組んだ中にslick.jsを入れたらバグった。

<div class="parent">
    <div class="child">
        <div class="slider">
            <div class="slide"><img src="https://placehold.jp/150x150.png" alt=""></div>
            <div class="slide"><img src="https://placehold.jp/150x150.png" alt=""></div>
            <div class="slide"><img src="https://placehold.jp/150x150.png" alt=""></div>
        </div>
    </div>
    <div class="child"></div>
</div>

.parent{ display: flex;}

開幕からデザインが壊れて、更にどんどんでかくなる。

対処法

あっちこっちで書かれてるのはこれ。

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

内容的に他に影響は無さそうだけど、嫌だって人とかできないって状況とかもある。
突き詰めるとこうなる。

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

多分ここが分水嶺。これ以上掘るのはめんどくさかった。

slickを複数設置するなら個別はめんどいので、*{}で指定するのが無難かなーと思います。