Safari滚动宽度未包含外边距问题 求CSS/SCSS解决方案

我有一个水平滚动的flex容器，内部包含多个子项，为最后一个子项设置了margin-inline-end: 20px。除Safari外，Chrome等其他浏览器都会将该外边距计入滚动宽度；但在Safari中滚动到最右侧时，这个外边距会被截断，无法显示完整的容器背景（红色区域）。

复现代码 #

CSS代码

.scroll {
  display: flex;
  overflow-x: scroll;
  background: red;
}

.item {
  padding: 10px;
  min-width: 50px;
  height: 100px;
  border: 1px solid #DDD;
  background: #fff;
  text-align:center;
}

.item:last-of-type {
  margin-inline-end: 20px;
}

.container {
  width: 200px;
  margin: 40px auto;
  border: 1px solid #DDD;
}

HTML代码

<div class="container">
  <div class="scroll">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
  </div>
</div>

纯CSS解决方案 #

方案1：用容器内边距替代子项外边距

将最后一个子项的外边距转移到滚动容器上，同时添加scroll-padding-inline-end优化滚动锚点行为，所有浏览器都会正确识别这个内边距：

.scroll {
  display: flex;
  overflow-x: scroll;
  background: red;
  padding-inline-end: 20px; /* 替代子项的右侧外边距 */
  scroll-padding-inline-end: 20px; /* 确保滚动定位时预留空间 */
}

.item:last-of-type {
  margin-inline-end: 0; /* 移除子项的外边距 */
}

方案2：添加伪元素占位

如果必须保留子项的外边距，可以给滚动容器添加一个宽度与外边距一致的伪元素，强制Safari计算额外的滚动宽度：

.scroll {
  display: flex;
  overflow-x: scroll;
  background: red;
}

.scroll::after {
  content: '';
  width: 20px; /* 和子项的margin-inline-end值一致 */
  height: 100%;
  flex-shrink: 0; /* 避免伪元素被flex布局压缩 */
}

方案3：使用flex gap统一间距（适用场景）

如果子项之间的间距可以统一，直接用flex的gap属性设置间距，再给容器添加右侧内边距，实现一致的滚动效果：

.scroll {
  display: flex;
  overflow-x: scroll;
  background: red;
  gap: 20px; /* 子项之间的统一间距 */
  padding-inline-end: 20px;
}

.item:last-of-type {
  margin-inline-end: 0;
}

内容的提问来源于stack exchange，提问作者m.popov