Настройка переполнения: авто, но не горизонтальная полоса прокрутки отображается

Question

Почему div с идентификатором "shouldHaveScrollBar" не отображает горизонтальную полосу прокрутки:

<div style="overflow:hidden; 
            width: 300px; height: 300px; background-color:blue; color:white">

    <div>Some stuff</div>
    <div>Some other stuff"</div>
    <div id="shouldHaveScrollBar" 
         style="background-color:grey; 
                width: 100%; height: 100%; overflow-x:auto">
      <input type="text" size=200">
    </div> 
</div>

Спасибо,

Answer 1

Поскольку горизонтальная полоса прокрутки скрыта в переполнении по оси y.

shouldHaveScrollBar установлен на 100% высоты, что составляет 100% от его родительского значения, поэтому его высота составляет 300 пикселей. К сожалению, два других элемента «Некоторые вещи» и т. Д. Нажимают на него, и это означает, что полоса прокрутки внизу скрыта overflow:hidden вашего родительского элемента.

Измените высоту shouldHaveScrollBar на 50%, и вы поймете, что я имею в виду. Ваш рост, вероятно, должен быть фиксированной высотой в пикселях, а не в процентах, в этом случае, или ваши другие элементы должны быть заданы в процентах, чтобы общее количество элементов вашего ребенка было <= 100%.