JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
  <div id="main-nav"></div>
  <div class="container">
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

CSS

* {
  box-sizing:borderbox;
  margin:0;
  padding:0;
  }

#main {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  min-height: 100vh;
}
#main-nav {
  flex: 0 0 50px;
}
.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid green;
}
.content {
  flex: 1;
  border: 1px solid orange;
}