JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="top"><ul><li>green box with variable height</li></ul></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; }

html, body {  height: 100%; }

#container { height: 100%; }
    
#top {
    background-color: lightgreen;
    padding: 10px 0;
    box-sizing: border-box;
}

#bottom {
    background-color: lightblue; 
    padding: 10px 0;
    box-sizing: border-box;
    height: 100%;

}