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全体に対して

@media all and (-ms-high-contrast: none){
min-height: 50%;
}

@media all and (-ms-high-contrast: none){

min-height: 50%;

}

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