比如下面的布局,main的宽度会被撑到800px,从而在wrapper出现滚动条。如果想main占剩余空间,又不想被child把宽度撑开,可以在main上加overflow=auto属性即可。此时main会出现滚动条。
<div class="wrapper">
<div class="menu"></div>
<div class="main">
<div class="child"></div>
</div>
</div>
body,html{
height: 600px;
width: 1024px;
}
.wrapper{
height: 100%;
display: flex;
overflow: auto;
border: 1px solid red;
}
.menu{
height: 100%;
flex: 0 0 360px;
border: 1px solid blue;
}
.main{
height: 100%;
flex: 1;
border: 1px solid green;
}
.child{
width: 1000px;
height: 200px;
background-color: #666;
}