JSFiddle - React, Tailwind, and code Playground

by Hongbo Miao

HTML

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css">
<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

  <div class="row footer">
      footer
  </div>
</div>

CSS

.wrapper {
  height: 20rem;
  display: flex;      /* if remove this, the style will be correct, but won't scroll */
  flex-flow: column;  /* if remove this, the style will be correct, but won't scroll */
}

.header {
  background: tomato;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
}