上午同事问我为什么flex盒子的高度被撑开了，但是并没有撑开到子元素高度的和（撑开高度小于子元素高度和）。本着遇到奇怪的CSS问题就模仿重现一次问题的原则，于是...终于...最后发现flex布局撑开的最大高度不会大于父级flex元素设置的高度！代码解释如下：
提示一： 没有上面的什么鬼原则哈，乱讲的。不同问题应该用相应的方法去解决，否则事倍功半哦。
提示二： 其实可以直接看结论，代码也很绕。
// html
<div class="cp" style="height: 400px;">
<div class="cl"></div>
<div class="cr">
<div class="i t1"></div>
<div class="i t2"></div>
<div class="i t3"></div>
<div class="i t4"></div>
</div>
</div>
// CSS
.cp {
display:flex;
height: 400px;
overflow-y: auto;
}
.cl {
flex: 0 0 40px;
background: #f00;
}
.cr{
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
.i {
flex: 0 0 auto;
display: flex;
height: 100px;
}
.t1 {
background-color: #333;
}
.t2 {
background-color: #555;
height: 200px;
}
.t3 {
background-color: #777;
}
.t4 {
background-color: #999;
}
在上述代码中：
-
.cp是最外层的容器，flex容器并固定高度为400px。 -
.cl、.cr是.cp的子元素，flex项目+flex容器。 -
.i是.cr的子元素，flex项目且总高度为500px。
依据弹性盒子的特性，按理.cr会被他的子元素撑开为500px，但并不是这样，执行发现.cr的高度是400px。原因就是其父flex容器规定了高度，子flex容器\项目的高度也被默认渲染为400px了（flex-grow： 1时）。
摸索出的大致结论
表现： 父元素如果为Flex容器，且规定了高度，子元素将不能被孙子元素撑开高度。
结论： Flex布局渲染子项目高度（宽度）优先级，
- CSS规定样式（
height: 300px） 。 - Flex容器为子项目自动分配的高度。
- 子项目的子项目撑开的高度（如果2条件生效，则该条件失效。也就是说，只要父元素是Flex项目且父元素的父元素有固定高度 -- 父元素被优先渲染为了固定高度，然后便不会被子元素影响高度了）
