[IE11]flex-direction columnでmargin autoをやったら空白ができた

ども、むったん（@6ttan）です。

flexboxって、とっても便利ですよね！
一昔前にfloatで対応していたあれやこれやが、シュパっとできちゃうのだから（擬音語w

でも油断してるとIE11で未対応だったりで、崩れてることがざらにあります。
今回はその崩れてた事例と解決方法について書いていきます。

謎の余白ができた

ソースコード

やりたかったことはこんな感じです。

See the Pen WNoKexe by むったん (@6ttan) on CodePen.

コードの説明

親要素.flexboxを横並びに。
子要素.content01、.content02の高さを揃えて。
尚且つ孫要素にあたる見出しやリストの高さが異なっても一番下のイメージに模した.imageを下揃えにしたかったんです。

孫要素の見出しやリストの高さが異なっても一番下のイメージを下揃えにしたい箇所は、まず子要素でflex-direction: column;を指定します。
孫要素.imageにはmargin: auto auto 0;を指定してあげれば、上記のようにリスト部分の高さが異なっても下に配置されるようになります。
※子要素でflex-direction: column;を指定したのは、見出しやリストに横幅を設定したくなかったから縦配置にしました。

期待を裏切らないIE11

これを実装して、Chrome、Firefox、Safari、Edgeでは問題なく配置されていましたが…やはり期待を裏切らないのがIE11。
flex-direction: column;をもしくはflex-direction: column-reverse;を使用するとバグが発生するらしく、以下のようになるらしい。
というか、なった。

「この空白なんなんだよぉぉ😱」ってヒステリックに叫んでしまったけど、とりあえず落ち着こう。
先人たちは既に解決方法を見つけていました（ありがたや〜🙏

解決方法

flex-direction: column;をもしくはflex-direction: column-reverse;の子要素に対してmin-height: 0%;を入れてあげれば万事解決でした👏

See the Pen flex-directionの使い方（IE11対応） by むったん (@6ttan) on CodePen.

今回で言えば謎の空白ができた.imageの部分に追加しました。
IE11の謎の空白が無くなるし、他ブラウザにも影響ありませんでした。

めでたし、めでたし👏