JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout">
  <div class="menu">
    Menu
  </div>
  <div class="header">
    Header
  </div>
  <div class="content">
    <div class="scrollable-content">
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
      <div>Lorem ipsum</div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

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

.layout {
  overflow: hidden;
  border: solid;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.menu {
  overflow: hidden;
  border: solid red;
  flex-grow: 0;
  flex-shrink: 0;
}

.header {
  overflow: hidden;
  border: solid green;
  flex-grow: 0;
  flex-shrink: 0;
}

.content {
  overflow: hidden;
  border: solid blue;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
}

.scrollable-content {
  overflow: auto;
  width: 100%;
}