title: Flex: 1 Doesn't Fill Angular Layout Div Vertically
body: <p>I'm working on a sidebar using Angular and Flex. It's app-sidebar within the following layout Angular component:</p>
  
  <pre><code>&lt;div fxlayout="row" fxFill&gt;
      &lt;app-sidebar fxLayout="column" fxFlex="10%"&gt;&lt;/app-sidebar&gt;
      &lt;div fxLayout="column" fxFlex="100"&gt;
          &lt;app-top-navbar class="navbar-component" fxLayout="column"&gt;&lt;/app-top-navbar&gt;
          &lt;div class="content" fxLayout="column" fxFlex&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to get the sidebar to fill the page vertically, the  list items within evenly spaced between that expanse. But I'm not having any luck... I've made a simplified version in this <a href="https://jsfiddle.net/zxcm4enw/5/" rel="nofollow noreferrer">JSFiddle</a>. You can see that it stretches horizontally (great, as I want it to fill that 10% of the greater layout), but it doesn't go to the bottom of the page. </p>
  
  <p>I'm new to Angular and Flex, so any help would be appreciated. Here's the Fiddle code (if it makes a difference, anchors are used, because I also have icons not included): </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>:host {
      display: flex;
      flex-direction: column;
      flex: 1 1 100%;
  }
  
  #sidebar-cont-div{
      display: flex;
      flex:1;
      flex-direction: column;
  }
  
  #navbar-content-container{
      display: flex;
      flex: 1;
      flex-direction: column;
  } 
  
  #main-navbar {
      background-color: red;
      border-radius: 50px 20px 20px 50px;
      text-align:center;
  }
  
  #nav-list {
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
      margin: auto;
      min-width:100%;
      height:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id = "sidebar-cont-div"&gt;
   &lt;nav id="main-navbar"&gt;
    &lt;div id="navbar-content-container"&gt;
      &lt;a href="#"&gt;
       &lt;h1 id="sidebar-logo"&gt;Project&lt;br&gt;Dash&lt;/h1&gt;
      &lt;/a&gt;
     &lt;ul id="nav-list"&gt;
      &lt;li class="sidebar-item" role="presentation"&gt;
       &lt;a href="#"&gt;
           &lt;span&gt;Overview&lt;/span&gt;
       &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="sidebar-item" role="presentation"&gt;
       &lt;a href="#"&gt;
        &lt;span&gt;Project Record&lt;/span&gt;
       &lt;/a&gt;
      &lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>