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

Posted 2023-03-05

【中文标题】弹性容器最小高度在 IE 中被忽略

【英文标题】：flex container min-height ignored in IE

【发布时间】：2017-03-22 07:37:53

【问题描述】：

据我所知，如果使用 IE10 / IE11，我应该能够使用标准化的弹性术语。

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

2 个子 div 不大于 400px，因此应该始终有足够的空间放置 justify-content: space-between。

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

这在 Chrome 和 Firefox 中有效，但在 IE 中无效，我不知道为什么。

欢迎任何 cmets 和反馈。

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

【问题讨论】：

我为容器添加了背景颜色。 （ 黄色的 ）。可以在jsFiddle上看到容器在IE中是400px。

正如@GCyrillus 所说，min-height 在 IE 中使用 flex 和 flex-direction: column 无法正常工作，请改用 height

【参考方案1】：

IE 10 和 11 在正确渲染 flexbox 方面存在许多问题。

这里有一个：flex 容器不尊重这些浏览器中的 min-height 属性。

一个简单的解决方案是让您的弹性容器也成为弹性项目。

只需将此添加到您的代码中（无需其他更改）：

body 
   display: flex;
   flex-direction: column;

revised fiddle

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

【讨论】：

感谢您的解决方案。即使 min-height 属性位于错误的 flex 容器之外，只要将其添加到具有 min-height 的元素，此解决方案就会起作用

【参考方案2】：

根据this bug IE11 在 flexbox 中使用 min-height 时无法正确呈现项目。

Edge 好像解决了这个问题，但是 IE10-11 不行。

【参考方案3】：

这是 IE10/11 中的一个错误。您可以在https://github.com/philipwalton/flexbugs#flexbug-3找到信息

要修复 IE10/11 中的此错误，请在 flex 容器周围添加一个包装器元素，该容器本身就是一个 flex 容器。在您的示例中，您可以将 display flex 添加到 body 标签。并在容器 div 中添加宽度 100% 样式