html - Strange behavior of "overflow: auto" on Chrome -

i'm developing site blog section. need section have fixed height. in order able see posts in blog added overflow: auto shows scrollbar when needed.

<div id="container"> <div id="content">     <div class="post">          long post....     </div>     <div class="post">         long post....     </div>     <div class="post">         long post....     </div>     ....     ....     ....     .... </div> </div>  #container {     overflow: hidden; }  #content {     height: 200px;     overflow: auto;     border: 1px solid red; }  .post {     margin: 20px 0; } 

i tested on chrome, firefox , ie. site on firefox , ie works expected, chrome, although shows scrollbar when list of posts bigger container, adds white gap size of list of posts under container.

i created fiddle can't reproduce chrome behavior there:

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

using overflow: scroll instead of auto gives me same results.

any ideas?

thanks in advance

i found solution problem. reason, work in chrome had add position:relative rule #content:

#content{     position: relative;     height: 200px;     overflow:visible;     border 1px solid red; }