Firefox：滚动容器内子元素右侧内边距为何缺失？

问题复现代码 #

CSS代码

div {
  border: 2px solid black;
}

.outer {
  max-width: 100px;
  overflow-x: scroll;
  padding: 10px;
}

.inner {
  width: 200px;
  padding: 5px;
}

HTML代码

<div class="outer">
  <div class="inner">
    padding on the right is missing
  </div>
</div>

效果对比 #

• 实际结果：滚动到最右侧时，.inner的右侧内边距完全看不到，像是缺失了
• 预期结果：滚动到最右侧时，.inner的右侧内边距能正常显示，和左侧内边距一致

问题原因 #

这是浏览器滚动容器的计算逻辑导致的：当父元素设置overflow-x: scroll时，浏览器计算可滚动区域宽度时，不会将父元素的右侧内边距纳入滚动范围。子元素宽度超过父元素内容区宽度后，滚动终点停在父元素内容区的最右侧，而非包含内边距的容器最右侧，所以子元素的右侧内边距被容器边缘截断，看起来就像消失了。

解决方法 #

方法一：修改布局属性

给.outer添加以下样式即可修复：

.outer {
  display: flex;
  text-wrap: nowrap;
}

设置display: flex后，滚动容器的可滚动区域会正确包含自身内边距；text-wrap: nowrap确保内部内容保持横向排列，避免flex布局自动换行。

方法二：使用滚动内边距属性

无需改变布局，直接给.outer添加scroll-padding-right，数值和自身padding-right保持一致：

.outer {
  scroll-padding-right: 10px;
}

该属性会告诉浏览器滚动时预留出右侧内边距的空间，让子元素的右侧内边距能正常展示。

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