I want to be able to set the height of the
table, and force the cells to scroll individually if they are larger than the
table.
Consider the following code: (see it in action here)
<div style="display: table; position: absolute;
width: 25%; height: 80%; min-height: 80%; max-height: 80%;
left: 0%; top: 10%; right: 75%; bottom: 10%; border: solid 1px black;">
<div style="display: table-row;">
<div style="display: table-cell; border: solid 1px blue;">
{Some dynamic text content}<br/>
This
cell should shrink to fit it's contents.
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; border: solid 1px red;
overflow: scroll;">
This should only take up the remainder of the
table's vertical space.
This should only take up the remainder of the
table's vertical space.
This should only take up the remainder of the
table's vertical space.
This should only take up the remainder of the
table's vertical space.
This should only take up the remainder of the
table's vertical space.
This should only take up the remainder of the
table's vertical space.
This should only take up the remainder of the
table's vertical space.
This should only take up the remainder of the
table's vertical space.
</div>
</div>
</div>
If you open this code (in IE8, in my case) you'll notice that the second
cell fits in the
table nicely when the browser is maximized. In theory, when you shrink the browser (forcing the
table to shrink as well), a vertical scrollbar should appear INSIDE the second
cell when the
table becomes too small to fit all of the content. But in reality, the
table just grows vertically, beyond the bounds set by the CSS height attribute(s).
Hopefully I've explained this scenario adequately...
Does anyone know how I can get this to work?
