为什么水平滚动条不可见，而垂直滚动条却不可见？

Question

在下面的HTML中，为什么水平滚动条不可见，而垂直滚动条却不可见？

对于Chrome，Firefox和Safari而言，这是正确的，但对于两个滚动条均不可见的Edge，则不是这样。

对我来说，两个滚动条不像在Edge浏览器中一样可见是合乎逻辑的。

<div style="position: absolute; width: 300px; height: 300px; border: 1px solid black; overflow: auto;">
  <div style="transform: translate(150px, 150px);">
    <div style="position: absolute; left: -25px; top: -25px; width: 50px; height: 50px; background: blue;"/>
  </div>
</div>

Answer 1

第二个div的高度为0，因为其唯一的内部元素是带有div的{​​{1}}。默认情况下，position: absolute元素的宽度为100％，高度为最小，以容纳所有内部元素，但是位置绝对或固定的元素不需要在其父容器内进行容纳，因此它们不会起作用他们的容器的高度。

如果要显示垂直滚动条，则可以将第二个div的高度强制设置为大于300px，或添加其他具有其他位置类型的子元素。