html flex 的高度,Flex布局高度撑开不足问题

上午同事问我为什么flex盒子的高度被撑开了，但是并没有撑开到子元素高度的和(撑开高度小于子元素高度和)。本着遇到奇怪的CSS问题就模仿重现一次问题的原则，于是...终于...最后发现flex布局撑开的最大高度不会大于父级flex元素设置的高度！代码解释如下：

提示一： 没有上面的什么鬼原则哈，乱讲的。不同问题应该用相应的方法去解决，否则事倍功半哦。

提示二： 其实可以直接看结论，代码也很绕。

// html

// 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项目且父元素的父元素有固定高度 -- 父元素被优先渲染为了固定高度，然后便不会被子元素影响高度了)