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-direction: column;
}
#header {
  height:30px;
  background-color: green;
}
#content {
  display:flex;
  flex-direction:column;
  flex:1;
  background-color: blue;
}
#content div {
  flex:1;
  height: 100%;
  background-color: red;
}