JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
    </div>
    <div class='row'>
        <div class='cell'>
            <div id="list">
                <div class="list-element">These are list elements.</div>
                <div class="list-element">If the list is too long</div>
                <div class="list-element">and reaches the bottom</div>
                <div class="list-element">the list should be scrollable.</div>
                <div class="list-element">(And only the list</div>
                <div class="list-element">These are list elements.</div>
                <div class="list-element">If the list is too long</div>
                <div class="list-element">and reaches the bottom</div>
                <div class="list-element">the list should be scrollable.</div>
                <div class="list-element">(And only the list</div>
                <div class="list-element">These are list elements.</div>
                <div class="list-element">If the list is too long</div>
                <div class="list-element">and reaches the bottom</div>
                <div class="list-element">the list should be scrollable.</div>
                <div class="list-element">(And only the list</div>
                <div class="list-element">These are list elements.</div>
                <div class="list-element">If the list is too long</div>
                <div class="list-element">and reaches the bottom</div>
                <div class="list-element">the list should be scrollable.</div>
                <div class="list-element">(And only the list</div>
                <div class="list-element">These are list elements.</div>
                <div class="list-element">If the list is too long</div>
                <div class="list-element">and reaches the bottom</div>
     ...

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    height:100%;
    width:100%;
    max-height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.row:first-of-type >.cell {
    background:lightgreen;
    height:1%;
}
.row:last-of-type >.cell {
    background:pink;
}
#list {
    height:100%;
    overflow-y:auto;
}