Overflow Setting: Displays an automatic but not horizontal scroll bar
Why the div with id "shouldHaveScrollBar" doesn't display the horizontal scrollbar:
<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>
Thanks,
a source to share
Because your horizontal scrollbar is hidden in y-overflow.
shouldHaveScrollBar
is set to 100% height, which is 100% of its parent, so it is 300 pixels high. Sorry, the other 2 divs "Some stuff" etc. Pop it out, which means your scrollbar at the bottom is hidden by overflow:hidden
your parent div.
Change the height shouldHaveScrollBar
to 50% and you can see what I mean. In this case, the height must be a fixed pixel height instead of a percentage, or your other divs must be given a percentage so that the total number of your child divs is <= 100%.
a source to share