JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  I Love CSS<br/>
  I Love CSS
</header>

<nav class="left-sidebar">
  <ul class="menu">
    <li>Bla bla bla bla bla bla bla bla bla bla bla bla</li>
    <li>Bla!</li>
    <li>Bla bla</li>
  </ul>
</nav>

<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, enim non lacinia laoreet, elit tortor pulvinar lectus, nec placerat lacus velit euismod nisl. Donec pulvinar sagittis tincidunt. Nullam varius libero at felis ullamcorper lacinia. Duis at felis urna. Aliquam erat volutpat. Donec vel eros eleifend, convallis lectus quis, ullamcorper diam. Nullam faucibus ex eu accumsan tincidunt.

Etiam placerat mauris ut finibus placerat. Suspendisse mollis, ipsum mattis fringilla mattis, orci est ultrices nisl, in euismod tortor nunc id mauris. Nam vestibulum vitae neque at rutrum. Ut vitae pharetra tortor. Quisque non mollis diam. Integer dignissim ex at elementum suscipit. Vivamus id condimentum ante. Donec in tincidunt turpis, eu viverra nibh. Donec nec mi enim. Sed in ex ipsum. Proin elementum nulla eleifend dictum ornare.

Proin sed convallis ligula. Fusce tincidunt ipsum lectus, eu egestas odio tempus quis. Donec volutpat sem non felis euismod, ut sollicitudin libero tempor. Mauris in metus ipsum. Maecenas risus enim, varius id rhoncus elementum, tempor ut nisl. Maecenas a rhoncus nulla, eget molestie erat. Morbi sed ligula scelerisque, egestas dolor at, auctor mi. Integer est libero, dignissim ut nisl vel, dignissim ultricies leo.

Mauris commodo luctus ex at imperdiet. Morbi lobortis justo justo, vitae pharetra nunc ornare vitae. Vivamus erat arcu, ultrices non efficitur vitae, tempor eu turpis. Aliquam tempus finibus placerat. Phasellus aliquet quis lorem et sagittis. Nam ex tortor, tristique in orci in, maximus suscipit ante. Nunc vitae augue tortor. Sed tincidunt posuere sem a posuere. Phasellus tempor, metus vitae cursus pharetra, tortor elit scelerisque lorem, non condimentum nisl lectus a velit. Praesent elementum sit amet...

CSS

* {
  box-sizing: border-box;
}

:root, html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: minmax(5rem,auto) 1fr minmax(5rem,auto);
  grid-template-columns: auto 1fr;
  grid-template-areas: 
    "left-sidebar header"
    "left-sidebar main"
    "left-sidebar footer";
}

body > nav.left-sidebar {
  background-color: #FFDDDD;
  grid-area: left-sidebar;
  min-width: 15rem;
  width: 15rem;
}

body > header {
  background-color: #DDFFDD;
  grid-area: header;
  min-width: 0;
}

body > main {
  background-color: #DDDDFF;
  overflow: auto;
  grid-area: main;
  min-width: 0;
}

body > footer {
  background-color: #DDDDDD;
  grid-area: footer;
  min-width: 0;
}