JSFiddle - React, Tailwind, and code Playground

by jondlm

HTML

<div class="container">
  <header>Header</header>
  <article>
    <ul>
      <li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li><li>yolo</li>
    </ul>
  </article>
  <footer>Footer</footer>
</div>

CSS

.container{
  outline: 1px solid red;
  display: flex;
  flex-direction: column;
  height: 80vh;
}

header, footer {
  padding: 20px;
}

article {
  overflow: auto;
}