Roroa.

こんにちはkazukiです。
今回はflexを使った際に、IEで起こった不具合についてメモしておきます。

flexのプロパティで「flex-direction」というものがあります。
display:flex;を指定すると横並びになりますが、追加でflex-direction:column;を記述するとflexの恩恵を受けながら縦積みにすることができます。（orderが使えてなどなど）

このプロパティを使った際にIEで不具合がおきました。

IEでおきた不具合とその条件

flexにflex-direction:column;を指定した子要素で画像の下にテキストという形はよくあります。
これを実装した際に不具合はおきました。
IEでみると画像の下に余白ができているのです。

これは、画像の元サイズの高さ分下に余白ができてしまっているようです。
Retina対応するために2倍のサイズで書き出し、表示は1/2でキレイに表示するということはよくあります。
その分、IEでは下に余白ができてしまいます。

「じゃあ元画像を通常サイズに〜」「imgのsrcset属性で振り分ければ〜」というのは一旦置いておきます。

解決方法

解決方法は子要素にmin-heightを指定するです。

min-heightは最小値を設定するcssなので、min-height:0%;と指定すると、特に他に影響もなくIEの不具合を解消できるかと思います。
※既にmin-heightを指定している場合はご調整ください。

サンプルコード

.flex {
	display: flex;
	flex-direction: column;
}
.flex * {
	min-height: 0%;
}

リセットcssに追加しちゃってもいいかも

* {
	min-height: 0%;
}

案件にもよるかもしれませんが、リセットcssを使用している場合、こんな感じで追加しちゃってもいいかもしれません。