设置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; //纵向需要滚动条的话
}