title: How do you create a 1-column, 2-row flex-box layout?
body: <h3>Given the following markup:</h3>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;div class="A"&gt;A&lt;/div&gt;
    &lt;div class="B"&gt;B&lt;/div&gt;
    &lt;div class="C"&gt;C&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>How do I achieve the following layout:</h3>
  
  <p><img src="https://i.stack.imgur.com/BRgI2.png" alt="enter image description here"></p>
  
  <h3>With the following behavior:</h3>
  
  <ul>
  <li><strong>A</strong> has fixed width of 150px</li>
  <li>Height of <strong>C</strong> is based on the height of the content inside of it (which changes), but it always remains fixed to the bottom.</li>
  <li>The flex container (<strong>.box</strong>) width takes up the full width of the browser.</li>
  <li><strong>B</strong> and <strong>C</strong> always take up the remaining width of the container (<strong>.box</strong>) after <strong>A</strong>'s 150px of width is taken into account.</li>
  </ul>
  
  <blockquote>
    <p>What about A's and B's height? Is it fixed or it varies depending on
    the content or something else?</p>
  </blockquote>
  
  <p>The height of the content inside of <strong>A</strong> will not change, but the height of the content inside of <strong>B</strong> will change. <strong>.box</strong> height should equal max(height <strong>A</strong>, height <strong>B</strong> + <strong>C</strong>)</p>
  
  <p><strong><a href="http://codepen.io/gilbox/pen/rLFHh" rel="noreferrer">Here's a pen where everything is stubbed out</a></strong></p>