Strange behavior of "overflow: auto" on Chrome

Question

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:

http://jsfiddle.net/u5d56/3/

Using overflow: scroll instead of auto gives me the same results.

Any ideas?

Thanks in advance

Answer 1

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;
}