Flex子元素height:100vh+overflow-y:auto在Safari无法滚动仅橡皮筋效果

问题描述 #

采用三列全屏高度Flex布局，每列作为Flex容器子元素实现独立滚动，Chrome中表现正常，但在Safari 17（macOS Sonoma/iOS）中仅显示橡皮筋弹性效果，无法真正滚动；移除.wrapper的min-height:100%后，内容充足的列可滚动，但内容较少的列仍存在滚动异常问题。

修复代码 #

修改后的CSS #

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.column {
  flex: 1 1 0%; /* 明确flex属性值，消除Safari计算差异 */
  min-height: 0; /* 允许Flex子元素收缩，确保overflow生效 */
  height: 100%; /* 继承容器高度，替代100vh避免嵌套冲突 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wrapper {
  width: 100%;
  /* 移除min-height:100%，避免强制撑满高度导致滚动计算异常 */
}

修复原理 #

1. 明确Flex属性值：
   Safari对flex:1的默认解析（flex-basis:auto）会根据子元素内容计算高度，导致.column高度超出容器范围，overflow-y:auto无法触发。设置flex:1 1 0%后，所有列会平均分配容器宽度，高度严格继承容器的100vh，确保滚动区域正确划定。

2. 添加min-height:0：
   Flex容器的子元素默认带有min-height:auto，会阻止元素收缩到小于内容高度，导致overflow设置失效。添加min-height:0后，允许.column的高度被限制在容器范围内，滚动行为正常触发。

3. 改用height:100%：
   当父容器已设置height:100vh时，子元素用height:100%继承高度比直接使用100vh更可靠，避免嵌套布局中的高度计算冲突。

4. 移除wrapper的min-height:100%：
   若给.wrapper设置min-height:100%，即使内容极少，.wrapper也会撑满.column高度，导致.column的scrollHeight等于clientHeight，无法触发滚动（仅显示橡皮筋效果）。移除该属性后，内容少时.wrapper高度小于.column，滚动区域计算正确，橡皮筋效果仅在滚动到边界时触发。

验证效果 #

该方案在Safari 17（桌面及iOS端）、Chrome中均能正常工作，每列可独立滚动，内容多少不同的列均符合预期滚动行为。

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