为什么我的 Flexbox 列子项没有填充 Chrome 中 100% 的高度？

Flexbox 列子项上的高度 100%

您的问题源于 Flexbox 规范中的冲突，这会影响高度百分比的计算方式铬合金。根据flexbox规范，当align-self设置为stretch（flex元素的默认值）时，它会调整元素的cross-size属性的使用值（在本例中为高度）。但是，百分比是根据父级的 cross-size 属性的指定值而不是使用的值进行操作的。

在您的示例中，.flex 元素的 CSS 设置为 flex: 1，这意味着它'将占用所有可用空间。 .flex-child 元素的高度设置为 100%，这意味着它将占据 100% 的可用高度（根据 flex 父级的指定高度计算）。但是，.flex 的高度没有明确设置，因此它默认为 auto。因此，Chrome 将 .flex-child 高度解释为 auto 的 100%，这就是它没有填充整个 .flex 元素的原因。

要解决此问题，您需要：

1. 设置.flex显示：flex；以确保它被识别为弹性容器。
2. 删除高度：100%；来自 .flex-child 的语句。

这将允许 .flex-child 填充其父 .flex 元素的整个高度。

但是，如果您正在尝试仅填充 .flex 的一部分。在这种情况下，您需要采用一种解决方法，例如使用 flex: 1 将第二个 .spacer 子级添加到 .flex 并将 .flex-child 设置为 flex: 9。虽然这是一个不太优雅的选项，但它是解决问题的一种解决方法规范的特殊性。

值得注意的是，此问题是 Chrome 特有的，在其他浏览器中可能不会发生。希望 Flexbox 规范的未来更新能够解决这种不一致问题并提高跨浏览器兼容性。

以上是为什么我的 Flexbox 列子项没有填充 Chrome 中 100% 的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！