为什么百分比高度在 Flexbox 列中不能按预期工作？

Flexbox 列中的百分比高度问题

在 Flexbox 布局中，通常希望 Flexbox 列的子项填充其高度。然而，用户可能会遇到将高度设置为百分比却无法得到预期结果的问题。

说明

根据 Flexbox 规范，元素的跨尺寸属性（在本例中为高度）使用指定值和使用值。百分比高度是根据父项的指定高度计算的，而不是根据使用的高度。

解决方案

要在 Chrome 中解决此问题：

1. 设置父容器（.flex）显示：flex。
2. 去掉高度：100%；来自子元素 (.flex-child) 的规则。

示例：

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

.flex {
  background: blue;
  flex: 1;
  display: flex; /* Added */
}

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

部分填充的替代方法

如果只需要填充父容器的一部分，可以添加一个额外的 Flex 子容器 (.spacer) 来占用剩余空间。

.flex-child {
  flex: 9;
}

.spacer {
  flex: 1;
}

结论

通过了解指定值和使用值之间的差异，开发人员可以克服 Flexbox 列中的百分比高度问题。尽管在某些情况下可能需要特定于浏览器的解决方法，但预计规范更新将在未来解决这些限制。

以上是为什么百分比高度在 Flexbox 列中不能按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！