使用填充隐藏滚动条不起作用

Question

我使用填充来隐藏滚动条，但如果您滚动到底部，您会看到有额外的空间。那么 CSS 有什么问题？

.outer {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  overflow: hidden;
}

.inner {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 0 80px 80px 0;
  box-sizing: content-box;
}

.content {
  width: 500px;
  height: 800px;
  background-color: yellow;
  border: 1px solid green;
}

<div class='outer'>
  <div class='inner'>
    <div class='content'></div>
  </div>
</div>