为什么我的 Flex 容器的'min-height”在 IE 中被忽略，如何修复？

Flex 容器的最小高度在 IE 中被忽略

IE 浏览器在 Flexbox 渲染方面有着臭名昭著的历史。在这些问题中，最小高度是柔性容器特别关注的问题。尽管有标准的期望，IE10 和 IE11 仍然忽略了 min-height 属性。

考虑一个容器 div 包含两个子 div 的场景。子级的大小小于 400px，确保有足够的空间用于 justify-content: space- Between 。目标是将第一个子元素对齐在顶部，第二个子元素对齐在底部。此设置在 Chrome 和 Firefox 中完美运行，但在 IE 中则不行。

此问题的根源在于特定的 Flexbox 错误 (Flexbug 3)。为了解决这个问题，一个简单的解决方法是将 Flex 容器转换为 Flex 项目本身。这可以通过添加以下 CSS 规则来实现：

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

合并此 CSS 将解决该问题，无需任何进一步修改。

要进一步探索，请查阅官方 Flexbug 存储库：https： //github.com/philipwalton/flexbugs#flexbug-3。该存储库提供了对各种 Flexbox 错误的见解并提供了有效的解决方法。

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