Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link.
HTML:
<div class='container'>
<div class='fix' />
</div>
CSS:
body {
margin: 0;
}
.container {
position: absolute;
overflow: auto;
width: 100%;
height: 100%;
max-height: 400px;
max-width: 400px;
}
.noscroll {
overflow: hidden;
}
.fix {
width: 400px;
height: 400px;
background-color: green;
}
The scenario is as follows: I need a fixed-size div that can be scrolled if the window size shrinks below a certain threshold. I specifically want the scrollbars to appear 'within the div', so I created a container to act as the 'scroll panel'. So far, everything seems fine.
The issue arises when you shrink the window enough for the scrollbars to show up, then expand it again. The scrollbars fail to hide when they should (at least logically speaking). I'm not sure if it's a bug or intended behavior, but my guess is on the former. My theory is that the vertical and horizontal scrollbars are preventing each other from disappearing.
The workaround mentioned is the commented javascript code. Uncommenting it will make the scrollbars behave as expected.
Can someone provide a better explanation?
Update:
So far, I have only been able to replicate this issue in Chrome. It seems to work fine in IE11 and Firefox.