滚动高度大于内部div的高度

Question

我有一个可滚动的div，它设置为一个外部div，溢出y设置为“ scroll”，而一个内部div溢出。

<div style="overflow-y: scroll; height: 300px;">
  <div style="height: 23500px;">
     <Children />
  </div>
</div>

我正在编写一个延迟加载子元素的脚本，因此每个子元素的位置都使用css transform: translate计算。每个子项的高度为50像素，并且变换基于子项的索引增加50像素。孩子们没有其他位置偏移。

预期结果：外部div在内部div的末尾停止滚动。

实际结果：滚动末尾总是有大约20px的额外空间。如果检查元素，则可以看到外部div滚动超过内部div。

如何防止这种情况？