CSS Flexbox问题：子flex项为何无法占满父容器高度？

问题原因 #

1. 当父容器设置为flex-direction: column的Flex布局时，子项默认的flex-grow值为0，只会占据自身内容所需的高度，不会自动填充父容器的剩余垂直空间。
2. 设置height: 100%无效的核心原因：父容器默认使用box-sizing: content-box，padding会额外增加容器的总高度，导致子项的百分比高度计算基准混乱；同时Flex布局下，子项的百分比高度需要依赖父容器明确的可用空间上下文，仅设置height:100%无法触发Flex布局的空间分配逻辑。

解决方案 #

方法1：使用flex-grow: 1（推荐） #

这是Flex布局的原生解决方案，让子项自动填充垂直方向的剩余空间，无需关心父容器的padding或其他布局细节：

修改后的CSS代码：

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box; /* 可选，确保padding包含在300px高度内，避免容器总高度溢出 */
}

.item {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  flex-grow: 1; /* 关键属性：让子项占满垂直剩余空间 */
}

方法2：通过box-sizing配合height: 100%（灵活性差，不推荐） #

如果一定要使用百分比高度，需要统一父容器和子项的盒模型，让height计算包含padding和border：

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box; /* 让padding包含在300px高度内 */
}

.item {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  height: 100%;
  box-sizing: border-box; /* 让自身padding和border包含在100%高度内 */
}

该方法仅适用于单个子项的场景，若后续添加多个子项会出现高度溢出问题，因此优先推荐flex-grow方案。

内容的提问来源于stack exchange，提问作者user26391684