html - 弹性盒子上的溢出问题

Question

我很难让 a 的内容flexbox滚动而不是向下推网页内容。本质上，我正在构建一棵树，并且页脚必须贴在容器的底部。在我附加的代码笔中，页脚应该在浏览器的底部，上面的内容可以滚动。有人可以在正确的方向上轻推我吗？

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>

代码笔

标签： htmlcss