JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top"></div>
<div id="content">Why this div is not 100% height? I need this to fill all the way to the start of the footer if content is to little. If content extends beyond the blue footer, it should push the footer down.</div>
<div id="anchored-footer"></div>

CSS

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; height: 100%;
    /* height: 0; interestingly, if height is set to 0, it expands 100% */
    /* but I need it to extend up to the blue bar only. */
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    min-height:calc(100% - 110px);
}