JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
  <div id="full-page">  
    <header>top</header>

    <div id="main-body">
      <nav>left</nav>
      <div id="main-column">
      center<br>
      b<br>
      v<br>
      d<br>
      e<br>
      e<br>
      f<br>
      f<br>
      d<br>
      e<br>
      e<br>
      f<br>
      d<br>
      e<br>
      e<br>
      f<br>
      f<br>
      f<br>
      </div>
      <div id="right-column">right</div>
    </div>
    </div>

  </body>
</html>

CSS

html, body {margin:0px;padding:0px;height:100vh;}
header {background-color:green; height:20vh;}
nav {background-color:red;}
#right-column {
  background-color:blue;
}
#full-page {
  display:flex;
  flex-direction: column;
}
#main-body {
  flex-grow:1;
  display:flex;
  position:relative;
}
#main-column {
  height:80vh;
  overflow-y: scroll;
}