IE11でFlexboxがオーバーフローしているコンテナの高さ

Question

まず、残念ながらIE11をまだサポートする必要があります。これは重複した質問ではないと思います。

私は、列、ヘッダー、フッター、メインに3つの柔軟なコンポーネントを含む単純なモーダルウィンドウを持っています。

オーバーフロー-yに設定されているモーダルの中央部分が画面の高さの80％になるまで、内容が大きくなるにつれて外側のボックスが大きくなる必要があります。スクロールバーとメインモーダルの高さは高くなりません。ここで

は私のマークアップ

<div class="modal-wrapper"> 
    <div class="modal"> 
    <div class="modal-header">Header</div> 
    <div class="modal-main"> 
     <div>Content goes here, could get very long</div> 
    </div> 
    <div class="modal-footer">Footer</div> 
    </div> 
</div> 

かなり標準的なものです。モーダルはflexに設定され、ヘッダーとフッターは固定高さです。中央のセクションは、必要に応じて拡大および縮小するように設定されています。主なことは、.modalが.modal-wrapperをオーバーフローしないようにすることです。

Chrome、Firefox、Safari、iOSでjsfiddleの設定がテストされていますが、右下のボックスの高さを上下にドラッグすると、動作する方法がわかります。 IE11は混乱ですが。今

https://jsfiddle.net/jonhobbs/sf6untnt/3/

、私はそれがここでのmin-heightのバグに関連している可能性が感じています

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

が、私はそれがまさにそのバグだ確信していない理由のどれもそのバグに対する回避策が機能しているようです（例えば、min-height：0ではなく1pxを使用し、別のflexboxでラップするなど）。

うまくいけば、SO上の誰かが、あなたがそれフレックス子作りとflex:0 1 80%;を使用している場合、それはIEであなたの悩みをFIXEすべきjsfiddleを見て、明らかな問題かもしれない

Answer 1

を見ることができます：

例

を

html, body{ 
 
    height: 100%; 
 
    display:flex; 
 
    flex-flow:column; 
 
} 
 

 
.modal-wrapper{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
    flex:0 1 80%;/* IE gets it , because the flow is column */ 
 
    max-height:80%;/* others such as FF gets it */ 
 
    background: white; 
 
} 
 

 
.modal{ 
 
    display: flex; 
 
    flex-glow: 1;/* doesn't exist */ 
 
    flex/*-shrink*/: 1; /* good enough */ 
 
    flex-direction: column; 
 
    min-height: 1px; 
 
} 
 

 
.modal-main{ 
 
    flex: 1;/* good enough */ 
 
    min-height: 1px; 
 
    overflow-y: auto; 
 
    padding: 20px; 
 
} 
 

 
.modal-header, .modal-footer{ 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
    height: 60px; 
 
    color: white; 
 
    line-height: 60px; 
 
    text-align: center; 
 
    background: dodgerblue; 
 
}

<div class="modal-wrapper"> 
 
    <div class="modal"> 
 
    <div class="modal-header">Header</div> 
 
    <div class="modal-main"> 
 
     <div>This content could get very long so I'm going to put a big long div in it</div> 
 
     <div style=" width:100px; height:1000px; background-color:red; opacity:0.1;"></div> 
 
    </div> 
 
    <div class="modal-footer">Footer</div> 
 
    </div> 
 
</div>

https://jsfiddle.net/sf6untnt/7/