title: Overflow issue on flex box
body: <p>I am having a bit of difficulty getting the contents of a <code>flexbox</code> to scroll rather than push the web contents down.  Essentially I am building a tree and the footer has to be affixed to the bottom of the container.  In the codepen I have attached, the footer should be at the bottom of the browser and the contents above to scroll.  Can someone give me a nudge in the right direction?</p>
  <p>CSS:</p>
  <pre><code>.tree-container{
      height: 100%;
      width: 25%;
      display: flex;
      flex-flow: column;    
  }
  .tree {
      flex-grow: 1;
      height:0;
      width: 100%;    
      padding: 4px 2px;    
      overflow-x: hidden ;
      overflow-y: scroll;    
      box-sizing: border-box;
      flex:1;
  }
  .tree ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  .tree li .item {
      display: flex;
      padding: 5px;
      position: relative;
      cursor:pointer;    
      svg{margin-right:10px;}
  }
  .tree-container .footer{
    text-align:center;
    border-top:1px solid red;
    padding:5px;
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;tree-container&quot;&gt;
    &lt;div class=&quot;tree&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node A&lt;/div&gt;&lt;/li&gt;
        &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node B&lt;/div&gt;&lt;/li&gt;
        &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node C&lt;/div&gt;&lt;/li&gt;
        &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node D&lt;/div&gt;&lt;/li&gt;      
        &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node E&lt;/div&gt;&lt;/li&gt;      
        &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node F&lt;/div&gt;&lt;/li&gt;      
        &lt;ul&gt;
          &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node F-1&lt;/div&gt;&lt;/li&gt;
          &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node F-2&lt;/div&gt;&lt;/li&gt;
          &lt;li&gt;&lt;div class=&quot;item&quot;&gt;Node F-3&lt;/div&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class=&quot;footer&quot;&gt;Footer Here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://codepen.io/ElCid91/pen/GRWjomY" rel="nofollow noreferrer">CodePen</a></p>