Menu
I basically have a layout like this:
<body>
<div style="height: 150px; width: 200px; background: green">
<div style="overflow: auto; max-height: 100px; background: blue">
some content <br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
<div style="overflow: auto; background: red">
some more content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
</div>
</body>
Now, I want the second div to fill all remaining height of the parent div and show the scroll bar if more space is needed. How can I achieve this? Currently, the second div never shows a scroll bar and just uses the space it needs, even if that will exceed the parents total height...
UPDATE:
Please test the solution you provide :-)
492
Set max-height to the second div as well
<body>
<div style="height: 150px; width: 200px; background: green">
<div style="overflow: auto; max-height: 100px; background: blue">
some content <br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
<div style="overflow: auto; background: red; max-height: 50px">
some more content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
</div>
I only know how to do with this using the forthcoming flexbox layout model. This is how you would do it in current versions of Firefox:
<div style="height: 150px; width: 200px; display: -moz-box; -moz-box-orient: vertical; background-color: green;">
<div style="overflow: auto; min-height: 1px; max-height: 100px; background-color: blue;">
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
<div style="overflow: auto; min-height: 1px; -moz-box-flex: 1; background-color: red;">
some more content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
