【效果图】
【HTML】
<div class="container">
<h1 class="title">
My title
</h1>
<div class="wrap">
<span>My content</span>
</div>
</div>
【CSS】
在不想被挤坏的盒子的CSS添加关键句:flex: 0 0 48px;
其中48px是这个盒子的需要被固定的大小,根据需要设置
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.title {
height: 48px;
background: skyblue;
flex: 0 0 48px; /* 关键句 */
/* flex: 0 0 auto; !! 如果需要按内容撑开,也可以设置成 auto */
}
.wrap {
flex: 1;
overflow: auto;
}
.wrap span {
display: inline-block;
height: 500px;
background: pink;
}