柔性集裝箱最小高度在IE中被忽略

據我所知，如果使用IE10/IE11，我應該可以使用標準化的柔性條款。柔性集裝箱最小高度在IE中被忽略

我有一個容器div和2個子div。

2個子div不大於400px，因此總是應該有足夠的空間存放justify-content: space-between。

我想要第一個孩子在頂部，第二個孩子在底部。

這適用於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/

來源

2016-11-08 Timon

我增加了容器的背景顏色。（黃色）。你可以在jsFiddle上看到IE中的容器是400px。 – Timon

作爲@GCyrillus在IE瀏覽器中使用flex和'flex-direction：column'的'min-height'不能正常工作，請使用'height'代替 – blonfu

IE 10 & 11在正確渲染flexbox時存在一些問題。

下面是一個：flex容器不尊重這些瀏覽器中的min-height屬性。

一個簡單的解決方案是讓你的柔性容器也是一個柔性物品。

只需添加到您的代碼（沒有必要的其他變化）：

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

revised fiddle

來源

2016-11-08 15:58:36

感謝解決方案。即使是最小高度屬性也是在錯誤的flex容器之外，只要將此方法添加到具有最小高度的元素中，此解決方案就會工作 – ggzone

根據this bug在Flexbox的使用最小高度時IE11不正確呈現的項目。

看來問題已在Edge中解決，但IE10-11無法正常工作。

來源

2016-11-08 15:52:06 Dekel

柔性集裝箱最小高度在IE中被忽略

回答

相關問題