如何让flex-direction:row的Flexbox子元素填充可用垂直空间？

你遇到的问题其实是Flexbox交叉轴对齐方式的设置问题。咱们先看你的代码里的关键矛盾：你给.flexcontainer设置了align-items: flex-start，这个属性会让所有子元素在垂直方向上顶对齐，自然不会拉伸填满同行的高度。

要实现让.flexchild.second自动拉伸到和同行最高元素（也就是动态高度的.flexchild.first）一样的高度，只需要调整两个核心点：

1. 修改容器的交叉轴对齐方式 #

把.flexcontainer的align-items值从flex-start改成stretch——这是Flexbox默认的交叉轴对齐方式，它会让所有子元素自动拉伸，填满容器在交叉轴（垂直方向，因为你用的是flex-direction: row）上的可用空间，而容器的高度会自动适配该行最高的子元素，刚好匹配你的动态高度需求。

修改后的容器样式：

.flexcontainer {
  display: flex;
  align-items: stretch; /* 替换原来的flex-start */
  flex-wrap: wrap;
}

2. 优化子元素的高度设置（可选但推荐） #

你的.flexchild.first设置了固定的height: 256px，如果实际场景中它的高度是动态变化的，建议只保留min-height，让它的高度由内容自然撑开，这样容器会自动跟随最高子元素的高度调整，其他子元素也会同步拉伸：

.flexchild.first {
  min-height: 128px;
  /* 移除固定height，让高度随内容动态变化 */
}

完整可运行示例代码 #

.flexcontainer {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px; /* 加个间隙更直观区分元素 */
  padding: 12px;
}

.flexchild {
  flex-basis: 140px;
  flex-grow: 2;
  border: 1px solid #ddd; /* 加边框方便观察拉伸效果 */
  padding: 8px;
}

.flexchild.first {
  min-height: 128px;
  background-color: #f5f5f5;
}

.flexchild.second {
  min-height: 128px;
  background-color: #e8e8e8;
}

这样调整后，不管.flexchild.first的高度怎么动态变化，同一行的.flexchild.second都会自动拉伸，填满该行的全部垂直空间；如果子元素因为宽度不足换行，不同行的子元素也会各自拉伸到所在行的最高高度，完全符合你的需求。

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