为什么水平滚动条可见而垂直不可见？答案

【问题标题】：Why is horizontal scroll bar visible and vertical isn't?为什么水平滚动条可见而垂直不可见？
【发布时间】：2018-12-26 11:25:43
【问题描述】：

使用下面的 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>

【问题讨论】：

标签： javascript html google-chrome transform microsoft-edge

【解决方案1】：

第二个div 的高度为0，因为它唯一的内部元素是div 和position: absolute。默认情况下，div 元素的宽度为 100%，高度为最小以组合所有内部元素，但具有绝对位置或固定位置的元素不需要在其父容器内进行组合，因此它们不会对其贡献容器的高度。

如果您希望显示垂直滚动条，您可以强制第二个 div 的高度大于 300 像素，或者添加更多具有其他位置类型的子元素。

【讨论】：