 <p>You have flex-basis on content as 100%</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>html, body { height: 100%; margin: 0 } .box { display: flex; flex-flow: column; height: 100%; } .box .row { border: 1px dotted grey; } .box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ } .box .row.content { flex: 1 1 100%; background-color: yellow; } .box .row.footer { flex: 0 1 40px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt; &lt;div class="row header"&gt; &lt;p&gt;&lt;b&gt;header&lt;/b&gt; &lt;br /&gt; &lt;br /&gt;(sized to content)&lt;/p&gt; &lt;/div&gt; &lt;div class="row content"&gt; &lt;div style="height:100%; width:90%; background-color:red;"&gt; Should fill the remaining space &lt;/div&gt; &lt;/div&gt; &lt;div class="row footer"&gt; &lt;p&gt;&lt;b&gt;footer&lt;/b&gt; (fixed height)&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>Hope it helps</p>