为什么给flex容器设置overflow-x:hidden会改变子项高度？如何解决？

问题原因 #

1. CSS规范对overflow属性有明确限制：当元素的overflow-x与overflow-y任意一个被设为非visible值时，另一个原本为visible的属性会自动被浏览器计算为auto，因此单独设置overflow-y: visible不会生效，实际#outer的溢出规则为overflow-x: hidden; overflow-y: auto。
2. #outer是开启了flex-wrap: wrap的flex容器，默认align-content属性值为stretch，当容器overflow为非visible值时，容器高度的计算逻辑会发生变化，无法完全自适应内容高度，进而导致子元素被压缩，这也是手动给子元素设置固定高度不生效的核心原因。

解决方法 #

方案1：保留overflow设置，调整flex容器属性 #

给#outer新增两个属性修正高度计算逻辑即可：

#outer {
  /* 原有属性保持不变，新增以下两行 */
  align-content: flex-start;
  height: fit-content;
}

• align-content: flex-start：关闭多行flex容器的默认拉伸对齐规则，让所有行都按实际内容高度排列
• height: fit-content：强制容器高度完全由内部内容撑开，不受overflow属性的高度计算规则影响

方案2：弃用overflow属性，用遮罩实现圆角裁剪（更推荐） #

如果仅需要解决子元素背景溢出覆盖圆角的问题，可以用CSS遮罩实现裁剪，完全不会触发overflow带来的滚动条、高度异常等副作用：

#outer {
  /* 删掉原有overflow-x、overflow-y配置，新增以下属性 */
  -webkit-mask-image: radial-gradient(circle, #fff 100%, #000 100%);
  mask-image: radial-gradient(circle, #fff 100%, #000 100%);
}

该方案通过遮罩将容器边界外的内容全部裁掉，完美保留圆角效果，也不会影响任何元素的布局计算。

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