Overflow issue on flex box

Question

I am having a bit of difficulty getting the contents of a flexbox 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?

CSS:

.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;
}

HTML

<div class="tree-container">
  <div class="tree">
    <ul>
      <li><div class="item">Node A</div></li>
      <li><div class="item">Node B</div></li>
      <li><div class="item">Node C</div></li>
      <li><div class="item">Node D</div></li>      
      <li><div class="item">Node E</div></li>      
      <li><div class="item">Node F</div></li>      
      <ul>
        <li><div class="item">Node F-1</div></li>
        <li><div class="item">Node F-2</div></li>
        <li><div class="item">Node F-3</div></li>
      </ul>
    </ul>
  </div>
  <div class="footer">Footer Here</div>
</div>

CodePen