Bootstrap 4 flex 100% w+h

by brian428

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: 100vh;
  min-width: 100% !important;
  display: flex;
  flex-flow: column;
}

.header {
  background: tomato;
  display: block;
}

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

.footer {
  background: lightgreen;
  display: block;
}