html - 在 IE 中忽略 flex 容器最小高度

Question

据我所知，如果使用 IE10/IE11，我应该能够使用标准化的 flex 条款。

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

2 个子 div 不大于 400 像素，因此应该始终为 justify-content: space-between 留出足够的空间。

我希望第一个 child 一直在顶部，第二个 child 一直在底部。

这在 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 方面存在一些问题。

这是一个: flex 容器不遵守这些浏览器中的 min-height 属性。

一个简单的解决方案是让您的 flex 容器也成为一个 flex 元素。

只需将此添加到您的代码中(无需其他更改):

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

revised fiddle

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