在IE和Safari中的Flexbox最大高度

我想通過flexbox在兩個靜態的之間獲得一個滾動容器。包裝這三個div的容器必須具有90vh的最大高度。該代碼在Chrome或Firefox中運行良好，但不在IE或Safari中。我已經測試了一些常見的flexbox-bug解決方法，但都沒有工作。在IE和Safari中的Flexbox最大高度

示例代碼：

.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/

提前感謝！

來源

2017-02-17 Tino

http://caniuse.com/#feat=flexbox –

嘗試添加此規則'體{顯示：彎曲; }'...這將修復IE11，Safari中會發生什麼？ – LGSon

@LGSon非常感謝。這是解決方案。訣竅是將另一個容器與_display：flex_放在外圍。 **重要的是，它的彎曲方向與內部容器相反**該死的IE;） – Tino

感謝@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; 
}

來源

2017-02-20 09:47:24 Tino

在IE和Safari中的Flexbox最大高度

回答

相關問題