title: How can I make my flexbox layout take 100% vertical space?
body: <p>How can I tell a flexbox layout row consume the remaining vertical space in a browser window?</p>
  
  <p>I have a 3-row flexbox layout. The first two rows are fixed height, but the 3rd is dynamic and I would like it to grow to the full height of the browser.</p>
  
  <p><img src="https://i.stack.imgur.com/WKkRJ.png" alt="enter image description here"></p>
  
  <p>I have another flexbox in row-3 which creates a set of columns. To properly adjust elements within these columns I need them to understand the full height of the browser -- for things like background color and item alignments at the base. The major layout would ultimately resemble this:</p>
  
  <p><img src="https://i.stack.imgur.com/3NVZM.png" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vwrapper {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: stretch;
      align-content: stretch;
      //height: 1000px;
  }
  .vwrapper #row1 {
      background-color: red;
  }
  .vwrapper #row2 {
      background-color: blue;
  }
  .vwrapper #row3 {
      background-color: green;
      flex 1 1 auto;
      display: flex;
  }
  .vwrapper #row3 #col1 {
      background-color: yellow;
      flex 0 0 240px;
  }
  .vwrapper #row3 #col2 {
      background-color: orange;
      flex 1 1;
  }
  .vwrapper #row3 #col3 {
      background-color: purple;
      flex 0 0 240px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="vwrapper"&gt;
          &lt;div id="row1"&gt;
              this is the header
          &lt;/div&gt;
          &lt;div id="row2"&gt;
              this is the second line
          &lt;/div&gt;
          &lt;div id="row3"&gt;
              &lt;div id="col1"&gt;
                  col1
              &lt;/div&gt;
              &lt;div id="col2"&gt;
                  col2
              &lt;/div&gt;
              &lt;div id="col3"&gt;
                  col3
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried adding a <code>height</code> attribute, which does work when I set it to a hard number but not when I set it to <code>100%</code>. I understand <code>height: 100%</code> isn't working, because the content isn't filling the browser window, but can I replicate the idea using the flexbox layout?</p>