IEでフレックスコンテナの最小高さが無視されました

Question

私が収集できる限り、IE10/IE11で作業する場合、標準化されたフレックス用語を使用できるはずです。

私はコンテナdivと2つの子divを持っています。

2つの子divは400pxより大きくないため、のための十分なスペースが必要です。

私は最初の子供を一番上に、二番目の子供を一番下にしたいと思っています。

これはChromeとFirefoxでは動作しますがIEでは動作しません。理由はわかりません。

コメントとフィードバックは大歓迎です。

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;"> 
 
    <div style="background-color: red;"> 
 
    <h2>Title (variable height)</h2> 
 
    <p>Summary (variable height)</p> 
 
    </div> 
 
    <div style="background-color: orange;"> 
 
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" /> 
 
    </div> 
 
</div>

https://jsfiddle.net/akxn68vm/

Answer 1

IE 10 & 11には、flexboxのレンダリングに関するいくつかの問題があります。

フレックスコンテナは、これらのブラウザのmin-heightプロパティを尊重しません。

簡単な解決策は、フレックスコンテナをフレックスアイテムにすることです。

ちょうどあなたのコードに（必要に応じてその他の変更を）これを追加しません：

body { 
    display: flex; 
    flex-direction: column; 
} 

revised fiddle

さらに詳しい情報：https://github.com/philipwalton/flexbugs#flexbug-3

Answer 2

this bug IE11によるとフレキシボックス内のmin-heightを使用している場合、正しくアイテムをレンダリングしません。

Edgeで問題が解決されたようですが、IE10-11は機能しません。