Safari中flex子元素水平滚动条覆盖内容（内容高度计算错误）

问题分析 #

你碰到的是Safari的一个经典布局bug：当水平滚动的div作为垂直flex容器的子元素，且所有父级（html/body/flex容器）都设置了height:100%时，Safari会错误地将子元素（.item）的height:100%解析为滚动容器的总高度（包含滚动条），而不是容器的可视内容区域高度。这就导致你设置的底部边框被滚动条挡住，而Chrome等浏览器会自动减去滚动条高度，正确渲染子元素。

这个bug的触发条件缺一不可：

• 整个布局链（html→body→flex容器）都设置了height:100%
• 滚动容器是flex-direction:column的flex子元素
• 子元素使用height:100%+box-sizing:border-box

可行修复方案 #

方案1：手动计算高度（适合滚动条高度固定的场景）

如果能确定Safari中滚动条的高度（通常默认是15px），可以用calc直接减去这个值：

.item {
  display: inline-block;
  height: calc(100% - 15px); /* 手动扣除滚动条高度 */
  border-bottom: 15px solid black;
  box-sizing: border-box;
  margin-right: 5px;
  width: 50px;
  background: red;
}

⚠️ 缺点：如果用户自定义了滚动条样式，这个值会失效，不够灵活。

方案2：解除flex容器的高度限制（推荐通用方案）

垂直flex容器默认会给子元素施加高度约束，干扰滚动容器的高度计算。给flex容器添加min-height:0可以打破这个限制：

#flexCont {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* 关键修复：解除flex子元素的高度限制 */
}

同时给滚动容器加上flex-shrink:0，防止被flex容器压缩：

#scrollable {
  height: 150px;
  flex-shrink: 0; /* 避免flex布局压缩滚动容器 */
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  border: 1px solid black;
  width: 250px;
}

这个方案不需要依赖滚动条的固定高度，适配性更强。

方案3：调整布局结构，脱离flex子元素层级

如果布局允许，可以在flex容器内嵌套一个普通div，把滚动容器放在这个div里，避开Safari对flex子元素的特殊处理：

<div id="flexCont">
  <div class="scroll-wrapper"> <!-- 新增普通容器 -->
    <div id="scrollable">
      <div class="item"></div>
      <div class="item"></div>
      <!-- 其他.item元素 -->
    </div>
  </div>
</div>

.scroll-wrapper {
  height: 150px; /* 把原scrollable的高度移到这里 */
}
#scrollable {
  height: 100%;
  /* 其余样式保持不变 */
}

测试建议 #

记得在移除边框的情况下测试修复效果，确保子元素的高度完全适配滚动容器的可视区域，不会被滚动条遮挡。

内容的提问来源于stack exchange，提问作者Lukáš Řádek