MacOS Safari 13及以下版本overflow-scroll失效问题

问题场景 #

我开发了带分类菜单和项目列表的页面，布局逻辑如下：

• <main> 标签设置 margin-top: 250px 与 height: calc(100vh - 250px)
• 采用Flex布局：项目容器高度超出calc(100vh - 250px)时，通过overflow-y: scroll滚动；内容不足时，菜单和容器通过align-items: flex-end对齐页面底部

该功能在多数浏览器正常，但MacOS Catalina的Safari 13及以下版本中，本该滚动的项目容器会被压缩高度适配可用空间，无法正常触发滚动。

修复方案 #

方案1：Flex布局下强制滚动容器高度 #

针对Safari老版本的Flex布局bug，给滚动容器添加min-height: 0并设置flex属性，打破浏览器的高度收缩限制：

/* 假设Flex父容器是main内部的容器 */
.main-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 项目滚动容器 */
.project-list-container {
  overflow-y: scroll;
  flex: 1 1 auto; /* 让容器占据剩余可用空间 */
  min-height: 0; /* 关键：修复Safari 13及以下的高度压缩问题 */
}

方案2：改用Grid布局（兼容性更稳定） #

如果Flex布局的bug难以调试，可切换为Grid布局，Safari老版本对Grid的高度计算逻辑更可靠：

.main-inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr; /* 菜单占自动高度，项目容器占剩余空间 */
  align-items: end;
}

.project-list-container {
  overflow-y: scroll;
}

原理说明 #

Safari 13及以下版本的Flex布局存在缺陷：当子元素设置overflow-y: scroll时，浏览器会优先压缩该元素高度以适配父容器，而非保留内容高度并触发滚动。min-height: 0会强制子元素忽略Flex的高度收缩规则，按照自身内容高度计算，超出部分正常滚动。

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