JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="flex">
  <header>header</header>
  <main>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
  </main>
  <footer>footer</footer>
</div>

CSS

.flex {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
header { 
  border: 1px solid #ccc;
}
main { 
  -ms-flex:1;
  background:#eee;
  display:block;
  overflow-y: auto;
  overflow-x: hidden;
}