CSS flex-wrap设置垂直滚动后换行出现异常行间隙

问题表现 #

卡片容器设置display: flex+flex-wrap: wrap实现水平换行排列，未设置固定高度时换行效果正常，行之间紧贴无间隙；添加固定高度+垂直滚动属性后，第二行及之后的卡片行和上一行之间出现大范围异常空隙。

原有存在问题的CSS代码：

.cards {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem; 
  
  /* 滚动相关属性添加后出现布局问题 */
  height: 70vh;
  overflow-y: scroll;
}

问题根因 #

这是Flex布局默认属性的正常表现，不是滚动属性的bug：

• 容器设置flex-wrap: wrap后属于多行Flex容器，默认主轴水平、交叉轴垂直，多行在交叉轴的对齐规则完全由align-content属性控制，该属性默认值为stretch
• 容器未设置固定高度时，高度完全由内部卡片内容撑开，交叉轴没有多余空间可分配，stretch规则不会产生额外间隙，换行表现符合预期
• 容器设置固定高度后，垂直方向有了明确的可用空间，默认的align-content: stretch会把容器内扣除卡片实际占用高度后的剩余空间，平均分配到所有Flex行的上下位置，最终表现为行之间出现异常大的间隙。

注意：align-items仅能控制单行内元素在交叉轴的对齐方式，对多行之间的空间分配没有效果，修改这个属性解决不了当前问题，这也是很多人踩这个坑的常见误区。

修复方法 #

在.cards的CSS规则中显式添加align-content: flex-start即可修复，该取值会让所有Flex行从交叉轴起始位置（容器顶部）开始依次排列，不会自动分配剩余空间，行之间会自然紧贴，同时完全保留固定高度+垂直滚动的需求。
修复后的完整CSS代码：

.cards {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem; 
  height: 70vh;
  overflow-y: scroll;
  /* 新增以下属性修复间隙问题 */
  align-content: flex-start;
}

如果需要其他垂直对齐效果，也可以根据实际需求替换align-content的取值：

• flex-end：所有行紧贴容器底部排列
• center：所有行在容器垂直方向居中排列
• space-between：首行紧贴顶部、末行紧贴底部，剩余空间平均分配在行间距中
• space-around：每行上下分配相等的间距

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