Flexbox Holy Grail (Manually)

HTML

<body>

<div class="master-container">
  <div class="no-flex bottom-border-thin" style="background-color: steelblue">
    <h2 style="color: white">Header <span class="code">[.master-container > .no-flex .bottom-border-thin]</span></h2>
  </div>

  <div class="flex-container-vertical">
    <div class="no-flex bottom-border-thin" style="background-color: lightyellow">
      Toolbar<br/><span class="code">[.flex-container-vertical > .no-flex .bottom-border-thin]</span>
    </div>

    <div class="flex-container-vertical flex-basis-50 bottom-border-thick" >

      <div class="no-flex">
        Section Heading (or even tabs) could go here<br>
        <span class="code">[.flex-container-vertical .flex-basis-50 .bottom-border-thick > .no-flex]</span>
      </div>

      <div class="flex-container-horizontal">
        <div class="scrollable-content flex-basis-50" style="background-color: white">
          <p><span class="code">
            [.flex-container-vertical .flex-basis-50 .bottom-border-thick > .flex-container-horizontal > .scrollable-content .flex-basis-50]
          </span></p>
          <p>This content is scollable!</p><p><em>(Shrink browser height to activate scrolling.)</em></p><p>Tab content goes here</p><p>Tab content goes here</p>
          <p>Tab content goes here</p>
        </div>

        <div class="scrollable-content flex-basis-50 left-border-thick" style="background-color: white">
          <p><span class="code">
            [.flex-container-vertical .flex-basis-50 .bottom-border-thick > .flex-container-horizontal > .scrollable-content .flex-basis-50 .left-border-thick]
          </span></p>
          <p>This content is scollable!</p><p>Tab content goes here</p><p>Tab content goes here</p><p>Tab content goes here</p>
          <p>Tab content goes here</p><p>Tab content goes here</p><p>Tab content goes here</p><p>Tab content goes here</p>
          <p>Tab content goes here</p><p>Tab content goes here</p><p>Tab content goes here</p><p>Tab content...

CSS

html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

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

  p { line-height: 2em; }

  .no-flex, .footer, .scrollable-content { padding: 10px; }

  .master-container {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    background-color: #000;
  }

  .no-flex {
    flex: none;
    background-color: red;
  }

  .footer {
    flex: none;
  }

  .flex-container-vertical {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
  }

  .flex-container-horizontal {
    display: flex;
    flex-direction: row;
    height: 100%;
    flex: 1;
  }

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

  .flex-basis-50 {
    flex-basis: 80%;
  }

  .flex-basis-33 {
    flex-basis: 33.3333%;
  }

  .bottom-border-thick {
    border-bottom-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;
  }

  .code {
    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  }