Flexbox row inside flexbox column
<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>