IE10とIE11でflex-directionを指定すると高さがなくなる

flex-directionプロパティを指定している要素の子要素が、IE10とIE11で高さがなくなる現象が発生します。

他のブラウザ:IE10とIE11以外のブラウザは正常に動作するキャプチャ

IE10とIE11:IE10とIE11は不具合が発生するキャプチャ

flexコンテナに対してflex-directionプロパティにcolumn(あるいはcolumn-reverse)、flexアイテムに対してflexプロパティに1を指定している場合に発生します。

HTML

CSS

この現象を回避するには、flex-shrinkを0に設定することで回避できます。

CSS