How do you make a CSS-defined table-cell scroll?

Question

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 its 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?

Answer 1

A very old question; but still No. 2 in Google when I searched for the same topic.

The simple solution what I found is to Wrap the contents of the "need to scroll div" into another div. Don't know why; but elements with "display:table-cell" don't scroll. But elements inside them can. So put a div inside and set it to scroll!.

Answer 2

To get that behavior you may have to just avoid the CSS table model, and create your own table-style display with floating, setting widths/heights, etc.