为什么'height: 100%”在 Chrome 的 Flexbox 列中无法按预期工作？

Flexbox 列中的高度问题：Chrome 怪癖

在 Flexbox 列中，使用高度百分比调整子元素大小时可能会遇到困难。此问题源于 Chrome 在处理 Flexbox 规范时的一个怪癖。

考虑以下示例：

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
}

.flex-child {
  background: red;
  height: 100%;
  width: 100%;
  display: block;
}

.static {
  background: green;
  width: 100%;
  height: 5rem;
}

您会期望红色 .flex-child 元素占据其蓝色 .flex 父级的整个高度。但是，height:100% 无法按预期运行。

解决方案：

要解决此问题：

1. 修改 .flex显示：flex。
2. 从 .flex-child 中删除 height:100%。

此调整可确保 .flex-child 填充 .flex 中的整个空间。

技术背景：

在flexbox中，align-self:stretch（默认）决定了弯曲元素的横向尺寸属性（这里是高度）。但是，百分比使用指定的交叉尺寸值，而不是其使用值。在这种情况下，.flex-child 尝试占据 .flex 指定高度的 100%，默认情况下为 auto。这会使布局引擎感到困惑。

将 .flex 设置为显示：flex 通过覆盖默认行为并允许更高级别的 CSS 确定 .flex 的大小来解决问题。

例外：

如果您想部分填充 .flex，此解决方案将不起作用。要实现此目的，您可以在 .flex 中添加一个带有 flex:1 的 .spacer 元素，并将 flex-child 设置为 flex:9 （以及 .flex 上的 flex-direction:column ）。然而，这是一种黑客攻击，希望未来的浏览器更新能够解决这个问题。

以上是为什么'height: 100%”在 Chrome 的 Flexbox 列中无法按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！