为什么我的 Flex 容器的'min-height”在 IE10 和 IE11 中被忽略？

Flex Container min-height 在 IE 中被忽略

在 IE10 和 IE11 中使用 Flexbox 时，您应该能够使用标准化的 Flex 术语。然而，用户遇到了一个问题，即这些浏览器不尊重 Flex 容器的 min-height 属性。

指定的 HTML 结构具有一个带有两个子 div 的容器 div，每个子 div 都有可变的高度。目标是让第一个子元素位于顶部，第二个子元素位于底部，它们之间的空间使用 justify-content: space- Between 均匀分布。

虽然此设置适用于 Chrome 和Firefox，IE 下失败。 min-height 属性被忽略，导致容器采用其最高子元素的高度。

解决方案在于解决 IE 渲染 Flexbox 的已知问题。根据 GitHub 的 flexbugs 文档 (https://github.com/philipwalton/flexbugs#flexbug-3)，这些浏览器版本在尊重 Flex 容器的 min-height 属性方面存在问题。

要解决此问题，只需使弹性容器本身成为弹性项目。按如下方式修改 CSS：

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

此更改强制包含容器 div 的 body 元素成为 Flex 项目。因此，容器 div 现在在该上下文中被识别为 Flex 子项，并且尊重其 min-height 属性。

修订后的 JSFiddle 演示了解决方案，容器现在正确地遵循指定的 min-height .

以上是为什么我的 Flex 容器的'min-height”在 IE10 和 IE11 中被忽略？的详细内容。更多信息请关注PHP中文网其他相关文章！