JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <div class="logo">Logo</div>
  <ul class="navmenu">
    <li>Start page</li>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
  </ul>
</nav>
<div class="content-wrapper">
  <div class="header">
    Header
  </div>
  <div class="content">
    <div class="page">
    <div class="page-inner">
    
    
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi enim dolore eveniet velit asperiores, laboriosam dicta in vitae odio placeat autem harum distinctio, quas magnam doloremque itaque sequi. Mollitia, totam.
      
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum qui.
      
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum qui.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum qui.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum qui.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum qui.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem...

SCSS

body {
  color: white;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  overflow: hidden;
  
  .logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: salmon;
  }
  
  .navmenu {
    margin: 0;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 10px 20px;
    background-color: pink;
  }
}

.content-wrapper {
  position: absolute;
  top: 0;
  left: 200px;
  bottom: 0;
  right: 0;
  overflow: hidden;
  
  .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: pink;
  }
  
  .content {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 10px 20px;
    background-color: rosybrown;
  }
  .page{height: 100%;}
  .page-inner {
    margin-bottom:-30px;
    min-height: 100%;
    
   
  }
  .page-inner:after{height:30px;
  content: "";
  display: block;
}
  .footer {
    height: 30px;
    color: brown;
    border: 1px solid brown;
  }
}