JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
  header
</header>

<div id="content">
      <div>
        height: 100%
      </div>
</div>

CSS

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-flow: column;
}
#header {
  flex: 0 1 auto;
  background-color: green;
}
#content {
  flex: 1 1 auto;
  background-color: blue;
}
#content div {
  height: 100%;
  background-color: red;
}