JSFiddle - React, Tailwind, and code Playground

by Ivan Gerasimenko

HTML

<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>The content of this cell <br/>defines height of the row</b><br>content<br>content<br>content<br>content<br>content<br>
        </div>
    </div>
</div>

CSS

/*This table has a fixed height either height:100% or height:XXpx*/
.table {
    display:table;
    height:100px;
    width:400px;
    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 > div {
    overflow-y: auto;
    height: 100%;
}