如何给容器添加padding使滚动内容不触碰上下边框？

问题出在当容器设置overflow-y: scroll时，浏览器的渲染逻辑会让容器的padding和滚动内容区域重叠，导致滚动到首尾时内容直接碰到容器边框。你之前尝试的内层容器思路是对的，只是可能写法有误，下面是可行的方案：

方案：使用内层容器承载padding #

把外层容器的padding移除，给内部新增一个div容器，将padding设置在这个内层容器上，同时确保内层容器宽度占满外层容器：

修改后的CSS：

.container {
  height: 100px;
  width: 300px;
  overflow-y: scroll;
  background-color: black;
}

.inner {
  padding: 10px;
  color: white;
  width: 100%;
  box-sizing: border-box; /* 确保padding不会撑大内层容器宽度 */
}

对应的HTML：

<div class="container">
  <div class="inner">
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
  </div>
</div>

原理说明 #

外层容器负责提供固定高度和滚动功能，内层容器负责添加padding和承载内容。box-sizing: border-box能保证内层容器的padding不会超出外层容器的宽度，避免出现横向滚动条。这样滚动时，内容的首尾会被内层容器的padding隔开，不会触碰外层容器的边框。

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