彈性容器最小高度在 IE 中被忽略

Question

據我所知，如果使用 IE10 / IE11，我應該能夠使用標准化的 flex 術語。

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

2 個子 div 不大於 400px，因此應該始終為justify-content: space-between留出足夠的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/

Answer 1

IE 10 和 11 在正確渲染 flexbox 方面存在許多問題。

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

一個簡單的解決方案是讓你的彈性容器也是一個彈性項目。

只需將此添加到您的代碼中（無需其他更改）：

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

修改后的小提琴

更多信息： https : //github.com/philipwalton/flexbugs#flexbug-3

Answer 2

根據此錯誤， IE11 在 flexbox 中使用 min-height 時無法正確呈現項目。

問題似乎在 Edge 中解決了，但 IE10-11 不起作用。

Answer 3

這是 IE10/11 中的一個錯誤。 您可以在https://github.com/philipwalton/flexbugs#flexbug-3 上找到信息

要修復 IE10/11 中的此錯誤，請在本身是 flex 容器的 flex 容器周圍添加一個包裝元素。 在您的示例中，您可以將 display flex 添加到 body 標簽。 並在容器 div 中添加寬度 100% 樣式