Почему горизонтальная полоса прокрутки видна, а вертикальная - нет?

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 с position: absolute.По умолчанию элементы div имеют ширину 100% и высоту как минимум для компиляции всех внутренних элементов, но элементы с абсолютным или фиксированным положением не нужно компилировать внутри их родительского контейнера, поэтому они не вносят свой вклад с ихвысота контейнера.

Если вы хотите, чтобы отображалась вертикальная полоса прокрутки, вы можете либо принудительно увеличить высоту второго элемента div до 300 пикселей, либо добавить больше дочерних элементов с позициями других типов.