html - Scroll doesn't work inside multiple divs -

html - Scroll doesn't work inside multiple divs -

please help me this

http://jsfiddle.net/5xxwq/

<div id="parent"> <div id="banner"></div> <div id="childsparent"> <div id="child"> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br> </div> </div> </div> #parent { background: #ccc; width:200px; height:500px; } #banner { width:200px; height: 50px; background: #ff0000; } #childsparent { overflow:scroll; }

i need create scrollable parent div must of height illustration 500px.

i know works when there parent , child, when there multiple div overflowing div , scroll doesnt work. how create work?

first, set overflow:hidden; on #parent, still have tall #childsparent. have restrict #childsparent. if know parent 500px tall , #banner 200px, set:

#childsparent { [...] height:300px; /*or*/ max-height:300px; }

if #childsparent kid of #parent #childsparent { ... height:100%; }. otherwise, if won't know size of #banner pull out javascript math.

html css scroll