flex 与 overflow

设置flex之后，使用overflow: auto; 不能在该固定区域内滚动

 <div class="container">
     <div class="header"></div>
     <div class="sub-container">
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
         <div class="content">1</div>
     </div>
     <div class="footer"></div>
 </div>

.container{
     width: 200px;
     height: 100vh;
     background-color: yellow;
     display: flex;
     flex-direction: column;
 }
 .header{
     height: 50px;
     background-color: gray;
 }
 .footer{
     height: 60px;
     background-color: gray;
 }
 .sub-container{
     height: 0;
     flex: 1;
     overflow: auto;
     background-color: pink;
 }
 .content{
     height: 40px;
 }

重点：可以添加height为0 或者 width为0

.sub-container{
    flex: 1;
    overflow: auto;
    width: 0; //横向需要滚动条的话
    height: 0; //纵向需要滚动条的话
}