如何使CSS定义的表格单元格滚动?

我希望能够设置表格的高度,并强制单元格在大于表格时单独滚动。

考虑以下代码:(请参阅实际操作中的代码) 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>

如果您打开这段代码(在IE8中,在我的例子中),您会注意到当浏览器最大化时,第二个单元格正好适合表。理论上,当您收缩浏览器(强制表也收缩)时,当表变得太小而无法容纳所有内容时,第二个单元格中应该出现一个垂直滚动条。但实际上,表只是垂直增长,超出了CSS设置的界限。 height 属性。

希望我已经充分解释了这个场景…

有人知道我怎样才能让这个工作吗?