css - 如何正确地让 flex-box 子元素滚动

Question

面对一些嵌套的 flex-boxes，我卡住了，无法让内容正确滚动。这是我的 CSS:

html,body,#root{
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}
.flex-fill{
   height:100%;
   width:100%;
   display:flex;
   align-items:stretch;
}
.flex-fill>div:last-child{
   flex-grow:1;
}
.flex-col{
   flex-direction:column;
}

<div id='root'>
  <div class='flex-fill flex-col'><!--actually scrolling div-->
     <div style="flex:0 0 35px"><h1>main title</h1></div>
     <div>
        <div class='flex-fill flex-col'>
           <div style="flex:0 0 30px"><h2>subtitle</h2></div>
           <div class='flex-fill'>
              <div style="flex:0 0 30%">...left side nav list...</div>
              <div class='flex-fill flex-col'>
                 <div style="flex:0 0 25px">...data header...</div>
                 <!--I hope the content of this div is scroll-able-->
                 <div style="overflow-y:scroll">...data list...</div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

最里面的div中包含的数据列表很长，我想让它可以滚动。但事实上，上面的代码使根 div 的全部内容滚动。我对 flex 或 overflow 有误解吗？如何修复其他部分并滚动数据列表？

Answer 1

答案已更新，以保持您的 HTML 结构不变。作为类删除和添加的内联样式:

html,body{
   height:100%;
   padding:0;
   margin:0;
}
#root {
  height: 100%;
	display: flex;
}
.flex-fill{
   height:100%;
   display:flex;
   align-items:stretch;
}
.flex-col{
   flex-direction:column;
   display: flex;
   flex: 1 0 0;
   height: 100%;
}
.flex-row{
   flex-direction:row;
   display: flex;
   height: 100%;
}
.scrolling-div {
	height: 100%;
	overflow-y: scroll;
}

<div id='root'>
  <div class='flex-fill flex-col'>
     <div><h1>main title</h1></div>
     <div class="flex-col">
        <div class='flex-col'>
           <div><h2>subtitle</h2></div>
           <div class="flex-row">
              <div>...left side nav list...</div>
              <div class='flex-col'>
                 <div>...data header...</div>
                 <!--Now Scrolls-->
                 <div class="scrolling-div">
				 ...scrolling data list...<br />
				 ...scrolling data list...<br />
				 ...scrolling data list...<br />
				 ...scrolling data list...<br />
				 </div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>