title: Flexbox row inside flexbox column
body: <p>I have a layout like this:</p>
  
  <pre><code>&lt;div class="flexbox"&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;div class="main"&gt;&lt;/div&gt;
    &lt;div class="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css for it:</p>
  
  <pre class="lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
  }
  .flexbox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    height: 100%;
    width: 100%;
  }
  .flexbox .main {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
  }
  .flexbox .header,
  .flexbox .footer {
    order: 0;
    flex: 0 1 auto;
    align-self: stretch;
  }
  </code></pre>
  
  <p>in the above <code>.main</code> column is stretched 100% <code>height</code>, all this works perfect, now adding <code>.flexbox-row</code> inside <code>.main</code>:</p>
  
  <pre><code>&lt;div class="flexbox"&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;div class="main"&gt;
      &lt;div class="flexbox-row"&gt;
        &lt;div class="first"&gt;&lt;/div&gt;
        &lt;div class="second"&gt;&lt;/div&gt;
        &lt;div class="third"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre class="lang-css prettyprint-override"><code>.flexbox-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
  }
  .flexbox-row .first,
  .flexbox-row .second,
  .flexbox-row .third {
    order: 0;
    flex: 0 1 auto;
    align-self: stretch;
  }
  .flexbox-row .second {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
  }
  </code></pre>
  
  <p>but for some reason <code>.main</code> column the second one does not stretch 100% in <code>height</code> anymore.</p>
  
  <p>Here is <a href="http://jsbin.com/qiyobagepa/edit?html,css,js,output" rel="noreferrer">jsbin</a> demo</p>