JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
  <div class="main">
    <div class="should-be-full-height">
      Hi
    </div>
  </div>
</div>

CSS

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  width: 100%;
  background-color: #CCC;
  border: 1px solid black;
}

.main {
  height: auto;
  flex-grow: 1;
  display: block;
  background-color: red;
  border: 1px solid white;
}

.should-be-full-height {
  background-color: grey;
  border: 1px solid black;
}