为什么'height: 100%”不适用于 Chrome 中的 Flexbox 列子项？

高度 100% 在 Flexbox 列子项上不起作用：浏览器特定的错误

您遇到的问题是 Flexbox 列中的子元素不响应身高百分比。此问题已在 Chrome 中发现，可能不会影响其他浏览器。

在您的代码示例中：

• .flexbox 设置为显示为具有列方向的 Flexbox 容器。
• .flex 是弯曲元素。
• .flex-child 是其中的子元素.flex.

将 .flex-child 设置为 height: 100% 时，无法填充其父级 .flex.

解决方案：

要解决此问题，请执行以下操作修改：

• 更改 .flex 以显示为弹性框： .flex { display: flex; }.
• 从 .flex-child 中删除 height: 100% 样式。

此更改将允许 .flex-child 元素填充 .flex 中的可用垂直空间。

说明：

Flexbox 规范声明align-self：stretch（弯曲元素的默认值）仅影响元素的跨尺寸属性的使用值（在本例中为高度）。但是，百分比是根据父级的 cross-size 属性的指定值而不是其使用值来计算的。

由于 .flex 没有指定高度，因此默认高度为“auto”。当您将 .flex-child 设置为 height: 100% 时，Chrome 会根据 .flex 的指定值（即“auto”）计算高度。因此，.flex-child 最终的高度为 0，因为“auto”意味着“根据需要大小”。

通过将 .flex 更改为显示为 Flexbox，您可以显式地将其 Flex 方向设置为 row 。这允许 .flex-child 按预期正确填充 .flex 的高度。

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