Angular 2 flex-layout height 100% : <p>Angular app using Material design and flex-layout.
<a href="https://github.com/angular/flex-layout" rel="noreferrer">https://github.com/angular/flex-layout</a></p>

<p>I'm trying to create a simple page layout of 2-columns on top (left=fill, right=10%), followed by a single row on the bottom of the screen.  The elements are still only filling just the vertical space required for the content.  The only way I've found to do this is to manually set height to 100%.  Is that how I have to do it?  What is wrong with this html?</p>

<pre><code>&lt;div fxLayout="column"&gt;
  &lt;div fxLayout="row" fxFlex="90%"&gt;
    &lt;div fxFlex="80%" class="border"&gt;
      &lt;p&gt;Stuff is happening here&lt;/p&gt;
    &lt;/div&gt;
    &lt;div fxFlex="20%" class="border"&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div fxLayout="row" fxFlex="10%" class="border"&gt;
    &lt;p&gt;Bottom element&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Result:</p>

<p><a href="https://i.stack.imgur.com/Qu5Cf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Qu5Cf.png" alt="enter image description here"></a></p>
