title: full height columns and header with flexbox
body: <p>I'm newish to flexbox. My  current layout isn't working as well as I'd hoped - my  columns are only as tall as the content within them.</p>
  
  <pre><code>  +----------------+
    | header         |
    +-+--------------+
    |n|content       |
    |v+--------------+
    +-+
    empty
  ----------------------
  </code></pre>
  
  <p>I'm hoping flexbox will solve that. I'll have to retrofit my existing markup.</p>
  
  <p>Page is full screen width, with a full-width header, then the rest of the page is fluid width content with a <strong>fixed width</strong> sidebar. (Some pages have a sidebar on the left, others have one on the right.)</p>
  
  <p>Ideally, the two content areas will both extend to the bottom of the page (with their coloured backgrounds) but only go over the fold and scroll if the content is longer than a page.</p>
  
  <pre><code>  +----------------+
    | header         |
    +-+--------------+
    |n| content      |
    |a|              |
    |v|              |
  --+-+--------------+--
  </code></pre>
  
  <p><strong>Do I treat the entire page as the "container", in which I create two rows, one of which is split? Or do I just start the flexbox stuff with the second row that has the sidebar?</strong> </p>
  
  <p>It seems to me, it has to be the former, if flexbox is to know how high my header is. Otherwise, when I set their heights to 100%, they'll go over the fold by an amount equal to my header.</p>
  
  <p>I didn't see a header-and-split-columns as a simple example in the flexbox docs, but I'll continue to read and experiment.</p>
  
  <p>(Naturally, it will also have to be responsive, so that, at smaller screen sizes, the elements wrap under each other to fit on a narrow screen.)</p>