JSFiddle - React, Tailwind, and code Playground

by Per Andersson

HTML

<div id="container">
    <div id="top">
        <ul>
            <li>green box with variable height</li>
        </ul>
        <div id="container-inner">
            <div class="box left">w: 50px</div>
            <div class="box middle">
                width of this box is<br /> variable
            </div>
            <div class="box right">
                width: 100%; should occupy remaining width of container
            </div>
        </div>        
    </div>
    <div id="bottom">
        <ul>      
            <li>blue box with <code>height: 100%</code> overflows browser window and launches vertical scrollbar</li>
            <li>we could remove scroll with <code>overflow: hidden</code> on <code>#container</code>, but that truncates bottom of this box</li>
            <li>how could we set the height of this box to always fit perfectly inside the container?</li>
            <li>in other words, the height should be <code>height: calc(100% - &lt;&lt;variable height of #top&gt;&gt;</li>
        </ul>
    </div>
</div>

CSS

* { margin: 0; box-sizing: border-box; }
html, body {  height: 100%; }
#container { height: 100%; display: table }   
#top {
    display: table-row;
    background-color: lightgreen;
}
#bottom {
    display: table-row;
    background-color: lightblue; 
    height: 100%;
}
ul { margin: 10px 0; }   

#container-inner { 
    display: table;
    width: 70%;
    border: 2px solid black;
    border-right: 2px dashed black;
    font-size: 0;
    overflow: hidden;
}   
.box {
    height: 50px;
    padding: 15px 5px;
    text-align: center;
    font-size: 16px;
    white-space: nowrap;
}
.left {
    display: table-cell;
    width: 50px;
    background-color: orangered;
}
.middle {
    display: table-cell;
    background-color: yellow;
}
.right {
    display: table-cell;
    width: 100%;
    background-color: gray;
    opacity: .7;
    text-align: left;
    white-space: normal;
}