CSS web技術

IEレスポンシブ時、flexの縦均等配置が効かなかっかので対処法

See the Pen YEKYqz by ore (@ore_new) on CodePen.

簡単に説明すると親要素Flexの中に3つの子要素が入っていて、均等配置されています。
これをIE11で確認したところ、画像縦のautoが聞かず、画像は等倍で縮小されますが、ボックスの高さが変わらず、画像の下に余白ができてしまいました。


以下のようにして解決しました。

See the Pen YEKYqz by ore (@ore_new) on CodePen.

IE全体に対して

を適用してみたところ、IE11できちんとレスポンシブされるようになりました。
これが正解なのかは……全部検証してませんが。

-CSS, web技術