Slick Sliderがレスポンシブ表示でおかしくなった！場合の対処法

Slick Slider レスポンシブになるとなぜか表示されない？

とっても便利な万能スライダーSlick Slider。WordPress以外の案件でスライダーと言ったら、ほぼすべてこれを入れています。
今回はWordPressにWooCommerceを載せて、商品ギャラリーにSlick Sliderを組み込んだというものです。

ところで、WooCommerceの商品ギャラリーはもともとあるし、プラグインだってあるのに、なぜそんな無駄なことをしたのか？
そんな疑問を持つ方もいらっしゃるかもしれません。

なぜならWooCommerceの商品ギャラリーのスライダーはカルーセルにならなかったり、巻戻ったり、サムネイルがすべて表示されてしまったりと納得のいくものがなかったので、自作したからです。

こんな感じのスライダーで、サムネイル付にしています。

ところが、通常のPCで表示している分には上図のように見えていたのですが、レスポンシブ表示にするとなぜか表示されない。
それも.slick-trackが33445500pxになってしまう。幅が異常に広くなっているようで、まったく見えない。

原因はたったこれだけ

最初はSlick Sliderのバグかと思い最新版を読み込むようにしてみたり、WooCommerceの中だから悪いのか？と疑ってみたものの、まったく修正できず。

海外サイトでもヒットしなかったのですが、たった一つだけ

上位がflexでラップされていると表示がおかしくなる

と記述が。

すがるような思いでスライダーからすると祖父どころか、曾祖父くらいのflexボックス指定を外したら、表示が直りました。
丸一日、悩んだんだけどな。
第一、PC版はflexボックス下でも表示されるのに。

今は動けば良いから原因は追究しません。終わり！

こんなエンジニアネタもあります