Flexの中でslickを使う方法

こんにちは！

突然ですがわたしはフリーランスでWEB制作をしています。
もう2年になります。時が経つのはあっという間です。

何回もやっていても同じ場所でつまづくことはよくあります。。
しっかりメモっておけよ！！って話なんですが、ついつい忘れてしまうんですよね。

ってことで、過去に3回ぐらいつまづいたのでいい加減メモっておきたいと思います。

Flexの中でslickスライダーがうまくいかない問題！

WEB制作をしている人は経験したことがあるのではないでしょうか？
Flexってもはや100％って言っていいくらい毎回使いませんか？
ですが、Flexの中でslickを使うのってありそうでそんなに多くない！
そして忘れたころにやってくるんですよね。

色々とググると、下記を追加すると一発で解決しました！ってブログがいくつか出てくるのですが、なぜだか私の環境下では解決しませんでした。

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

もしくは

.hogehoge-slide *{
    min-height: 0;
    min-width: 0;
}

わたしが調べた範囲では上記で解決しなかったパターンを見つけられないんです。なぜ、、？
みんなこれで解決しているのか？！そしてわたしはなぜこれで解決しないのか・・！！

ってことでググって見つけられなかったので、ChatGPTに聞いたら解決してくれました！
下記を追加で解決です！！

.slick-slide {
    min-width: 0;
}

理由はいろいろとChatGPTが書いていましたが、面倒なので割愛します。
気になる方はChatGPTに聞いてみてください。無料バージョンで大丈夫だと思います！
AIに感謝！！時代はAI！！

.slick-slideに対して直接min-width:0;を当てるってことですね。

わたしのように*指定でダメだった人に届いてほしい～～！！
これで一緒に乗り切りましょう！！

————————————————————————————-

自分用に下記もメモ

sliderがページ読み込み時に一瞬縦になるのを隠す方法

.hogehoge-slide{
    opacity: 0;
    transition: opacity .2s linear;
}
.hogehoge-slide.slick-initialized{
    opacity: 1;
}

slideの準備が出来てから表示させる。