JSFiddle - React, Tailwind, and code Playground

HTML

<div class='flex'>
  <header>
    content
  </header>
  <article>
    <div class='empty'>content</div>
    <div class='empty'>content</div>
    <div class='empty'>content</div>
    <div class='empty'>content</div>
  </article>
  <footer>
    content
  </footer>
  <div class='empty'>
    test 123123434 test 123123434 test 123123434
  </div>
</div>

CSS

html,body {
  height: 100%;
  margin: 0;
  
}
.flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header, footer {
  height: 100px;
  background-color: white;
}
article {
  flex-grow: 1;
  overflow-y: scroll;
  background-color: tomato;
}
.empty {
  height: 100px;
  margin: 20px 0;
}