overflow容器右侧padding/margin-right不生效，滚动无预期空间咨询

这是CSS中overflow: auto的一个常见行为：当容器设置了滚动行为时，滚动内容会延伸到容器的padding区域内部。虽然你给父元素设置了box-sizing: border-box，padding被包含在width范围内，但滚动的内容（子元素）会填满容器的整个内部空间（包括padding区域），所以当你滚动到最右侧时，子元素的右边缘会直接顶到父元素的border位置，导致你设置的padding-right: 15px被内容覆盖，看不到橙色背景。

下面提供两种可靠的解决方法，你可以根据需求选择：

方法1：使用scroll-padding（推荐，现代浏览器支持） #

scroll-padding是CSS滚动模块的属性，专门用来定义滚动容器的内边距，确保滚动内容在滚动到边缘时会留出指定的空间。只需要给父元素添加这个属性即可：

.parent {
  background-color: orange;
  width: 150px;
  height: 50px;
  overflow: auto;
  padding-right: 15px;
  scroll-padding-right: 15px; /* 添加这一行 */
}
.child {
  background-color: blue;
  width: 250px;
  height: 100%;
  margin: 0 10px;
}
body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

这样滚动到最右侧时，子元素会自动留出15px的空间，你就能看到父元素的橙色背景了。

方法2：调整子元素的margin #

如果你需要兼容更旧的浏览器，可以通过增加子元素的右侧margin来模拟padding效果，让子元素的右边缘不会顶到父元素的border：

.parent {
  background-color: orange;
  width: 150px;
  height: 50px;
  overflow: auto;
  padding-right: 15px;
}
.child {
  background-color: blue;
  width: 250px;
  height: 100%;
  margin: 0 10px 0 10px;
  margin-right: calc(10px + 15px); /* 原来的margin-right加上父元素的padding-right */
}
body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

这里用calc()来计算总margin-right，确保数值准确，滚动到最右侧时就能看到父元素的padding区域了。

补充说明：两种方法的核心都是让滚动内容在边缘位置留出父元素padding的空间，区别在于scroll-padding是浏览器原生支持的滚动内边距，更简洁语义化，而调整margin是兼容性更好的传统方案。

内容的提问来源于stack exchange，提问作者A. L