为什么我的 Flexbox 容器的'最小高度”在 Internet Explorer 中被忽略？

Flexbox：在 Internet Explorer 中忽略最小高度

尝试在 Internet Explorer (IE) 中使用标准化 Flexbox 术语实现 Flex 容器时在版本 10 和 11 中，用户可能会遇到指定的 min-height 属性被忽略的问题。这可能会导致意外的行为，因为容器高度不受最小值限制。

问题：

具有两个子 div 的 Flex 容器会表现出意外的高度行为在IE中。子 div 的高度小于 400px，但容器的 min-height 属性 400px 被忽略，导致容器无法扩展以容纳 justify-content: space- Between 属性。这可以防止第一个子 div 与顶部对齐，以及第二个子 div 与底部对齐。

解决方案：

要在 IE 10 和 中解决此问题11、需要让flex容器本身成为一个flex item。这可以通过在代码中添加以下 CSS 来实现：

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

通过将 body 元素设置为 Flex 项目，容器 div 继承了 Flexbox 属性并正确遵循 min-height 属性。

修订后的示例：

带有弹性项目修复的更新代码可在修订后的版本中找到小提琴：

<div></div>

以上是为什么我的 Flexbox 容器的'最小高度”在 Internet Explorer 中被忽略？的详细内容。更多信息请关注PHP中文网其他相关文章！