在表格单元格上显示表格和溢出

Question

如何在table-cell添加溢出？

table-cell没有固定的尺寸，但相对于table和上table-cell的总高度

http://jsfiddle.net/mgyj1sgk/2/

<div class="table">
    <div class="row">
        <div class="cell cell_top">Top</div>
    </div>
    <div class="row">
        <div class="cell cell_overflow">
            content<br>content<br>content<br>content<br>content<br>content<br>content<br>
            content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        </div>
    </div>
</div>

/*This table does not have a fixed height (height:100%)*/
.table {
    display:table;
    height:100px;
    width:100px;
    border:1px solid black;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
/*This cell does not have a fixed height (could contain multiple lines)*/
.cell_top {
    height:1px;
    min-height:1px;
}
/*This cell must overflow if the height is exceeded*/
.cell_overflow {
    overflow-y:auto;
}

Answer 1

您可以将子div添加到table-cell中并在那里生成溢出

<div class="table">
    <div class="row">
        <div class="cell cell_top">Top</div>
        <div class="cell cell_top">Top</div>
    </div>
    <div class="row">
        <div class="cell cell_overflow">
           <div> content<br>content<br>content<br>content<br>content<br>content<br>content<br>
            content<br>content<br>content<br>content<br>content<br>content<br>content<br>
           </div>
        </div>
        <div class="cell">
            <b>This cell'c content <br/>defines row's height</b><br>content<br>content<br>content<br>content<br>content<br>
        </div>
    </div>
</div>

CSS更改：

/*This cell must overflow if the height is exceeded*/
.cell_overflow > div {
    overflow-y: auto;
    height: 100%;
}

Demo fiddle