Bootstrap 4 holy grail test

by brian428

HTML

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css">
<div class="container wrapper">
  <div class="row header padded bottom-border-thin">
      Header
  </div>
  
  <div class="row padded bottom-border-thin" style="background-color: lightyellow">
      Toolbar
  </div>
  
  <div class="container wrapper" style="padding: 0px;">
    <div class="row padded" style="background-color: lightcyan">
      TOP tabs
    </div>
    <div class="row scrollable-content padded">
      TOP content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      
    </div>
  </div>

  <div class="container wrapper" style="padding: 0px;">
    <div class="row padded top-border-thick" style="background-color: lightcyan">
      BOTTOM tabs
    </div>
    <div class="row padded scrollable-content">
      BOTTOM content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content: fill remaining space and scroll<br>content: fill remaining space and scroll<br>
      content:...

CSS

html, body { height: 100%; padding: 0; margin: 0; overflow: hidden; }

.wrapper {
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  display: flex;
  flex-flow: column;
}

.header {
  background: steelblue;
  color: white;
}

.scrollable-content {
  background: white;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}

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

.top-border-thick {
    border-top-style: solid;
    border-width: 6px;
    border-color: slategrey;
  }

  .left-border-thick {
    border-left-style: solid;
    border-width: 6px;
    border-color: slategrey;
  }

  .bottom-border-thin {
    border-bottom-style: solid;
    border-width: 2px;
    border-color: slategrey;
  }
  
  .padded {
    padding: 6px;
  }
  
  .flex-container-vertical {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
  }