JSFiddle - React, Tailwind, and code Playground

by Vivekk Upadhyay

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;
  flex-flow: column;
}

.header {
  background: tomato;
}

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

.footer {
  background: lightgreen;
}
.row {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}
.row:before, 
.row:after {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}