为什么'height: 100%”在 Chrome 中的 Flexbox 列子项上不起作用？

Flexbox 列子元素的高度 100% 不起作用：Chrome 问题

在 Flexbox 中，预计子元素应填充可用高度由 height:100% 属性指定。但是，当父元素是 Flexbox 列时，这种行为在 Chrome 中会被破坏。

在提供的示例中，以下代码旨在创建 Flexbox 列布局：

.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

并且子元素设置为填充可用高度：

.flex-child {
  height: 100%;
}

但是，在 Chrome 中，子元素不会响应 height:100% 属性，使其具有未定义的高度。

解决方案：

可以通过修改以下内容解决：

1. 设置父元素.flex显示：flex。这是显式指示浏览器使用 Flexbox 布局的关键步骤。
2. 从子元素 .flex-child 中删除 height: 100% 属性。这消除了浏览器尝试将百分比值应用于未指定的父高度而造成的混乱。

说明：

Flexbox 严格遵循规范。 align-self:stretch 值是弯曲元素的默认值，仅修改 cross-size 属性的“使用”值（在本例中为高度），而不修改其“指定”值。另一方面，百分比是根据父级的 cross-size 属性的指定值计算的。

由于 .flex 没有指定的高度，尝试在 .flex 上设置 height: 100%- child 导致 .flex 未指定高度的 100%，这本质上是“自动”。这会导致浏览器误解意图。

通过将 .flex 设置为 display: flex，我们强制浏览器使用 Flexbox 布局，确保元素布局正确。此外，删除 .flex-child 上的 height: 100% 属性允许元素继承其父级 .flex 的指定高度。

限制：

而该解决方案适用于填充 .flex 的整个空间，如果仅要填充 .flex 的一部分，则它可能不起作用。在这种情况下，可能需要使用绝对定位或多个 Flexbox 子项的解决方法。

以上是为什么'height: 100%”在 Chrome 中的 Flexbox 列子项上不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！