Flexbox IE11で高さを埋めない

Question

私はこのケースを持っています：

http://codepen.io/anon/pen/radoPd?editors=11

これはCSSコードです：

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  overflow-y: scroll;
}

何らかの理由で、IE11では、.sidebarも.main領域もラッパーの高さ全体を占めません。

これはブラウザ間の不整合です。これはバグですか？何か不足していますか？

Answer 1

これは既知の IEバグ で、残念ながらWon't FixとしてIEチームによってクローズされ、以下のように説明されています。

フレックスボックスをサポートする他のすべてのブラウザでは、flex-direction:columnベースのフレックスコンテナは、min-heightの長さを計算するためにコンテナflex-growを尊重します。 IE10＆11プレビューでは、明示的なheight値でのみ機能するようです。

私の知る限り、そしてこの説明にもかかわらず、このバグはflex-directionがrowの場合にも当てはまります。コメントで述べたように、Philip Waltonはソリューションを提案しています here 。これには高さを固定値に設定することが含まれますが、これはOPのオプションではありません。

回避策として、min-height: 100vhをmain要素にも設定することを提案します。

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  min-height: 100vh;
}

ペン ここ 。