为什么位置绝对元素的滚动条受铬中位置固定元素的影响？

Question

今天我遇到了一个沮丧的问题。当位置固定元素位于下方时，位置绝对元素的滚动条将以不同方式定位，如灰色div所示

然后我尝试降低固定div的高度，滚动条又回到了

此外，当我将身体设置为隐藏溢出时，无论固定div的高度如何，孩子的滚动条也是正常的。这种情况只发生在Chrome中，而Safari中的滚动条很好

这两个div的一些css：

#popup-div {
  cursor: default;
  position: absolute;
  top: 28px;
  width: 360px;
  background: #fff;
  box-shadow: -1px 2px 17px #E2E2E2;
  right: -83px;
  z-index: 99;
}


.side-div {
  border: 2px solid #f0f0f0;
  background: #fff;
  box-shadow: -10px 1px 10px #EAEAEA;
  height: 32%;
  min-width: 222px;
  width: 17%;
  background: #f0f0f0;
  right: 0px;
  bottom: 0px;
  z-index: 96;
  font-size: 12px;
  position: fixed;
  border-radius: 4px 0px 0px 0px;
}

对此有何解释？