flex上中下三栏布局【遗留问题】
overflow-x:hidden overflow-y:scroll flex-grow:1 flex-basis:0/0%
head h:1rem
overflow-x:hidden overflow-y:scroll flex-basis:0/0%
head h:1rem
overflow-x:hidden overflow-y:scroll
head h:1rem 高度为什么缩小？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../网易云/css/diy-default.css">
<link rel="stylesheet" href="../网易云/css/resetm.css">
<style>
body{
/* background-color: #00FF7F; */
}
header{
width: 100%;
height: 1rem;
background-color: #808080;
}
footer{
width: 100%;
height: 1rem;
background-color: #808080;
}
footer div{
padding-top: .5rem;
height: .5rem;
background-color: #ADFF2F;
}
section{
flex-grow: 1;
flex-basis: 0%;
}
</style>
</head>
<body>
<div class="flex-box fthreeBox">
<header></header>
<section class="fthreeMid">
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
</section>
<footer>
<div></div>
</footer>
</div>
</body>
</html>
解答
| overflow-y | 内容会挤占其他元素位置 |
|---|---|
| flex默认 | 0 1 auto |
| flex-grow:0 | 默认索取剩余空间，默认值为0 |
| flex-shrink ：1 | 超出压缩比例，默认值为1 |
| flex-basis:auto | item自动分配长度 |
| flex-basis：0/0% | 长度为0 |
flex-basis:auto 此时为auto
| flex-basis：0/0% | 长度为0 |
|flex-grow:1 |默认索取剩余空间 |
| flex-basis：0/0% | 长度为0 |
-------------------------------------------------------------
总结：
情况一：.fthreeMid什么也不写，宽度默认为flex-basis:auto 自动分配，会挤占左右两侧长度
情况二：.fthreeMid 加上 overflw xy
overflow-x: hidden;
overflow-y: scroll;
左右两侧还剩余一点点空间
情况三：.fthreeMid 加上 overflw xy 再加上 flex-grow:1
overflow-x: hidden;
overflow-y: scroll;
flex-grow: 1;