防止滚动到填充区域

Question

在下面的代码中，我们看到滚动的溢出内容如何滚动到顶部/底部填充区域。

有什么方法可以防止这种情况，同时仍将滚动条保持在右边缘旁边？

.parent {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  overflow: auto;
}

.child {
  word-wrap: break-word;
  border: 1px solid blue;
  padding: 1rem;
}

<div class="parent">
  <div class="child">
    FofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofof FofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofofFofofofofofof
  </div>
</div>

更高级的CodePen示例（虽然有相同的问题）：使用CodePen，因为它包括Bootstrap：https://codepen.io/magnusriga/pen/VGdxJy