How do you create a table cell scroll defined by CSS?

Question

I want to be able to set the table height and force scroll cells 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 vertical space.
            This should only take up the remainder of the table vertical space.
            This should only take up the remainder of the table vertical space.
            This should only take up the remainder of the table vertical space.
            This should only take up the remainder of the table vertical space.
            This should only take up the remainder of the table vertical space.
            This should only take up the remainder of the table vertical space.
            This should only take up the remainder of the table vertical space.
        </div>
    </div>
</div>

If you open this code (in IE8, in my case), you will notice that the second cell fits perfectly into the table when the browser is maximized. Theoretically, when you shorten the browser (causing the table to also shrink), the vertical scroll bar should appear in the second cell when the table becomes too small to fit all the content. But in fact, the table just grows vertically, beyond the limits specified by the CSS attribute height.

Hope I explained this scenario adequately ...

- , ?

Answer 1

; № 2 Google, .

, , - " div" div. , ; "display: table-cell" . . div !.

Answer 2

, CSS / ..