IEとSafariでのFlexboxの最大高さ

Question

私はflexbox経由で2つの静的なものの間にスクロールコンテナを取得しようとしています。これら3つの区画を包むコンテナの最大高さは90vhでなければなりません。コードはChromeやFirefoxでは正常に動作しますが、IEやSafariでは動作しません。私はすでにいくつかの一般的なflexbox-bugの回避策をテストしましたが、それらのどれも働いていませんでした。

例コード：

.outer { 
    max-height: 90vh; 
    width: 400px; 
    display: flex; 
    flex-direction: column; 
} 

.body { 
    flex: 1 1 auto; 
    overflow: auto; 
} 

<div class="outer"> 
    <div class="header">header</div> 
    <div class="body">a lot of content</div> 
    <div class="footer">footer</div> 
</div> 

は事前にhttps://jsfiddle.net/rqz2g3kz/

感謝を参照してください！

Answer 1

@ LGSonのおかげで、私は解決策を見つけました。

誤った容器の周りに反対のフレックス方向を持つラッピング容器を追加すると便利です。

だから例えば、得られたコードはこのようになります：

<div class="outer-wrapper"> 
    <div class="outer"> 
     <div class="head">Head</div> 
     <div class="body">a lot of content</div> 
     <div class="footer">footer</div> 
    </div> 
</div> 

.outer-wrapper { 
    display: flex; 
    flex-direction: row; 
} 

.outer { 
    max-height: 90vh; 
    width: 400px; 
    display: flex; 
    flex-direction: column; 
} 

.body { 
    flex: 1 1 auto; 
    overflow: auto; 
}