查遍各大资源无任何flex嵌套布局的例子，经过自己折腾完成了项目中的高度自适应需求（更多应用于前端组件）
效果图：
html代码：（关键地方已经用颜色特别标识 ^_^）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>flex 嵌套 之 高度自适应</title>
<style media="screen">
body, html {
height: 90%;
}
.flex {
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.item {
flex: auto;
}
.overflow {
overflow: auto;
}
.outer {
height: 70%;
border: 1px solid silver;
}
.contener {
background: pink;
border: 1px solid silver;
}
.contener>div{
padding: 5px;
}
</style>
</head> <body>
<h1>flex 嵌套布局</h1>
<div class="flex outer">
<div style="background-color: silver; padding: 10px;">外容器 自适应内容的区域 ... ...</div>
<div class="flex item overflow" style="padding: 15px;"> <!-- 嵌套的item加flex样式 及 overflow: auto属性 -->
<div class="flex contener overflow"> <!-- overflow: auto 高度自适应必须 -->
<div style="background-color: yellow;">
<h3>内容器 - 头部信息</h3>
</div>
<div class="item overflow"> <!-- overflow: auto 高度自适应必须 -->
内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
</div>
<div style="background-color: yellow;">
<h3>内容器 - 尾部信息</h3>
</div>
</div>
</div>
</div> </body> </html>
总结：
flex布局嵌套的关键，就是对item进行容器定位，赋予flex特性。
flex知识学习小游戏： https://flexboxfroggy.com/