嵌套flex下 overflow失效
通常在写页面时会有这样的需求:页面内的局部区域可滚动,即在flex盒子A下嵌套另一个flex盒子B, B的高度是flex:1,让B的子元素高度是flex:1且overflow:auto,但是这种情况下的overflow会失效!
解决办法:解决overflow失效的关键代码是min-height: 0;
示例如下:
效果对比图:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
padding: 0;
margin: 0;
box-sizing: border-box;
height: 100%;
}
.container{
height: 100%;
background-color: #b2b2b2;
display: flex;
flex-direction: column;
}
.header{
height: 80px;
background-color: salmon;
}
.content{
flex: 1;
background-color: sandybrown;
display: flex;
flex-direction: column;
/* 解决嵌套flex:1;下overflow失效的关键! 设置最小高度 */
min-height: 0;
}
.footer{
height: 80px;
background-color: salmon;
}
.content-content{
flex: 1;
background-color: aquamarine;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">我是头部</div>
<div class="content">
<h3>我是二级头部</h3>
<div class="content-content">
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
<p>这是内容。。。</p>
</div>
</div>
<div class="footer">我是脚部</div>
</div>
</body>
</html>