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:
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; }
Comments
Post a Comment