JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100%; height: 100%; border-width: 2px; border-style: solid; background: blue; position: absolute">

    <div style="height: 20px; border-width: 2px; border-style: solid">
        fixed height 20
    </div>

    <div style="height: 50px; border-width: 2px; border-style: solid">
        fixed height 50
    </div>

    <div style="height: 100px; border-width: 2px; border-style: solid">
        fixed height 100
    </div>

    <div style="border-width: 2px; border-style: solid; height: 100%;">
        Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? Auto expanding? 
    </div>

    <div style="height: 50px; border-width: 2px; border-style: solid">
        fixed height 50
    </div>
</div>

CSS

body
{
  height: 100%;   
  background: red;
}