Flexbox Holy Grail Bulma

HTML

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.css">
<body>

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

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

</div>

</body>

CSS

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

  html, body { height: 100%; padding: 0; margin: 0; overflow-y: auto; overflow-x: hidden}

  p { line-height: 2em; }

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

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

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

  .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: 50%;
  }

  .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;
  }