nlight nlight - 5 months ago 20
CSS Question

scrollable div inside container

I have the following HTML: http://jsfiddle.net/fMs67/. I'd like to make the div2 to respect the size of div1 and scroll the contents of div3.

Is this possible?

Thanks!

UPDATE-1:

This is the more advanced case that I oversimplified when I asked the question: http://jsfiddle.net/Wcgvt/. I need somehow that header+it's sibling div to not overflow the parent div's size.

Answer

Adding position relative to the parent, and a max-height:100%; on div2 works.

<div id="div1" style="height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
        <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
</div>

</body>‚Äč