弹性盒子 Flex 子元素高度塌陷
作者：互联网
数据来源：https://blog.csdn.net/sinat_36539161/article/details/81663971
先看看页面整体布局：
· wrap 弹性布局，分 head、main；
· head 弹性布局，分 h2、i ；
问题：head 高度塌陷。
高 32px，变成：24.03px（PS里：chrome是23px，IE是24px）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.wrap{ width: 600px; height:600px; margin: 10px auto;border:1px solid #ddd;}
.head{ height: 32px;line-height: 32px;padding-left:6px;padding-right:6px;align-items: center;border-bottom: 1px solid #ddd;}
.head h2{font-size: 16px;}
.main{overflow: auto;}
.icon{display: inline-block;width: 16px;height: 16px;margin-right: 3px;}
.flex,.flexCol{ display: flex;}
.flexCol{flex-direction: column;}
.flex_item{flex-grow: 1}
</style>
</head>
<body>
<div class="wrap flexCol">
<div class="headflex">
<h2 class="flex_item">head</h2>
<i class="icon" style="background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/rrecom_icon_e34d796.png) 0 -20px no-repeat;"></i>
</div>
<div class="main flex_item">
<div style="height: 800px;">
内容区域
</div>
</div>
</div>
</body>
</html>
说明：以下任意情况，head都不会高度塌陷的：
A）、main 内容高度不超出，
B）、head 不使用弹性布局（去掉 flex）。
看到这里，很多也许会说，那 head 不用 flex 不就得了。没错，毕竟还有浮动大法、绝味九剑、table神掌等一大堆神功能用！但是，嫌苹果不耐摔，又用回诺基亚的做法，朕实在办不到。没办法，太，较真，天生要强！
闲话少说，来分析一下！！
先读读上面的说明，来找突破口：1-main内容高度不超出，这个不能动！
2-head 不使用弹性布局，可以从这里试试。
1、既然使用 head 不使用 flex 高度不坍塌，那在外层加一个div，会怎样呢？！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.wrap{ width: 600px; height:600px; margin: 10px auto;border:1px solid #ddd;}
.head{ height: 32px;line-height: 32px;padding-left:6px;padding-right:6px;align-items: center;border-bottom: 1px solid #ddd;}
.head h2{font-size: 16px;}
.main{overflow: auto;}
.icon{display: inline-block;width: 16px;height: 16px;margin-right: 3px;}
.flex,.flexCol{ display: flex;}
.flexCol{flex-direction: column;}
.flex_item{flex-grow: 1}
</style>
</head>
<body>
<div class="wrap flexCol">
<div>
<div class="head flex">
<h2 class="flex_item">head</h2>
<i class="icon" style="background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/rrecom_icon_e34d796.png) 0 -20px no-repeat;"></i>
</div>
</div>
<div class="main flex_item">
<div style="height: 800px;">
内容区域
</div>
</div>
</div>
</body>
</html>
行了！
给手机贴了个膜，能防摔了，但是，能不能不贴膜，把屏幕做坚固点呢！
2、于是，我把 flex 的文档再翻出来，当我翻到 flex-shrink 时，读到了这样一行字：
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
空间不足，对啊，不就是因为 main 内容超出了，才挤压到 header高度。
打个不恰当的比喻：
一家人分食披萨，假设披萨一共六块，爸妈默认一人只吃一块（flex-grow:0），父母宠爱儿子，大部分都给儿子（flex-grow：1）吃，儿子小吃的饱饱的，一家人和和美美。
但随着儿子的成长，成家生子，儿子一家四块不够吃了，还要吃爸妈那一份！那，怎么办呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
</head>
<body>
<div style="width: 600px; height: 30px; display: flex;">
<div style="width: 100px; background: black; color: #fff">爸</div>
<div style=" flex-grow:1; background: green;color: #fff"><div style="width: 500px;">儿子一家</div></div>
<div style="width: 100px; background: red;color: #fff">妈</div>
</div>
</body>
</html>
这样，立一个新规矩：优先保障爸妈的那一份，剩余的再让儿子家吃！
这个优先级，在 flex 的属性就是flex-shrink，默认是1，越小代表越高。 负值无效。
也就是爸妈优先级设为最高：flex-shrink：0，儿子默认：flex-shrink：1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
</head>
<body>
<div style="width: 600px; height: 30px; display: flex;">
<div style="width: 100px; background: black; color: #fff;flex-shrink:0">爸</div>
<div style=" flex-grow:1; background: green;color: #fff"><div style="width: 500px;">儿子一家</div></div>
<div style="width: 100px; background: red;color: #fff;flex-shrink:0">妈</div>
</div>
</body>
</html>
高宽保障的优先级：flex-shrink:0 > flex-grow:max > flex-grow:min
所以，最优解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.wrap{ width: 600px; height:600px; margin: 10px auto;border:1px solid #ddd;}
.head{ height: 32px;line-height: 32px;padding-left:6px;padding-right:6px;align-items: center;border-bottom: 1px solid #ddd;}
.headh2{font-size: 16px;}
.main{overflow: auto;}
.icon{display: inline-block;width: 16px;height: 16px;margin-right: 3px;}
.flex,.flexCol{ display: flex;}
.flexCol{flex-direction: column;}
.flex_item{flex-grow: 1}
</style>
</head>
<body>
<div class="wrap flexCol">
<div class="headflex" style="flex-shrink: 0">
<h2 class="flex_item">head</h2>
<i class="icon" style="background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/rrecom_icon_e34d796.png) 0 -20px no-repeat;"></i>
</div>
<div class="main flex_item">
<div style="height: 800px;">
内容区域
</div>
</div>
</div>
</body>
</html>
--------------------- 作者：唐鹏程 来源：CSDN 原文：https://blog.csdn.net/sinat_36539161/article/details/81663971 版权声明：本文为博主原创文章，转载请附上博文链接！
标签：Flex,head,盒子,16px,flex,height,塌陷,32px,main 来源： https://www.cnblogs.com/yupixiu/p/10320533.html