Strange behavior of "overflow: auto" on Chrome
22,331
I found the solution to my problem. For some reason, for this to work in Chrome I had to add a position:relative rule to #content:
#content{
position: relative;
height: 200px;
overflow:visible;
border 1px solid red;
}
Author by
leemon
Updated on July 19, 2022Comments
-
leemon almost 2 years
I'm developing a site with a blog section. I need this section to have a fixed height. In order to be able to see all the posts in the blog I added an overflow: auto so it shows a scrollbar when needed.
<div id="container"> <div id="content"> <div class="post"> This is a long post.... </div> <div class="post"> This is a long post.... </div> <div class="post"> This is a long post.... </div> .... .... .... .... </div> </div> #container { overflow: hidden; } #content { height: 200px; overflow: auto; border: 1px solid red; } .post { margin: 20px 0; }
I tested this on Chrome, Firefox and IE. The site on Firefox and IE works as expected, but Chrome, although it shows a scrollbar when the list of posts is bigger than the container, adds a white gap the size of the list of posts under the container.
I created a fiddle but I can't reproduce the Chrome behavior there:
Using overflow: scroll instead of auto gives me the same results.
Any ideas?
Thanks in advance