如何垂直拉伸已拉伸flex子项的后代元素（flex列容器场景）

AI 小北

2026-9-24

问题根源

这个问题的核心是百分比高度的参考规则：元素设置height: 100%要生效，必须父级有明确的已计算高度值作为参考。
你给body设置min-height: 100vh时，.flex-child-2是通过flex:1动态拉伸得到的高度，没有显式定义的高度值，所以它的后代的height:100%找不到参考基准，自然无法实现拉伸。
你把body改成固定height:100vh虽然能让百分比高度生效，但固定高度下内容超过视口高度就会溢出，不可取。

最优解决方案

不需要修改body的min-height配置，只要给拉伸的flex子项也开启flex布局，让后代继承拉伸高度即可，修改后的CSS代码如下：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  border: 4px solid green;
  /* 保留原有min-height配置，不需要改成height */
  margin: 0; /* 清除浏览器默认边距，可选配置 */
}

.flex-child-1 {
  width: 100px;
  background-color: SteelBlue;
}

.flex-child-2 {
  flex: 1;
  background-color: LightSeaGreen;
  /* 新增以下两行，开启列方向flex布局 */
  display: flex;
  flex-direction: column;
}

.flex-child-2-child {
  /* 把原来的height:100%换成flex:1，自动拉伸占满父级高度 */
  flex: 1;
}

.flex-child-2-child-child {
  height: 100%;
  background-color: Tomato;
  display: flex;
  width: 100%;
}
.flex-child-2-child-child > div {
  flex: 0 1 auto;
  border: 1px solid yellow;
  height: 100%;
  width: 100px;
}
.flex-child-2-child-child > div + div {
  flex: 1;
  /* 长内容时如果需要内部滚动可加overflow:auto，可选配置 */
}

HTML代码不需要做任何修改，即可同时满足两种场景的需求：