Flex布局高度撑开不足问题

上午同事问我为什么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;
}

在上述代码中：

1. .cp是最外层的容器，flex容器并固定高度为400px。
2. .cl、.cr是.cp的子元素，flex项目+flex容器。
3. .i是.cr的子元素，flex项目且总高度为500px。
   依据弹性盒子的特性，按理.cr会被他的子元素撑开为500px，但并不是这样，执行发现.cr的高度是400px。原因就是其父flex容器规定了高度，子flex容器\项目的高度也被默认渲染为400px了（flex-grow： 1时）。

摸索出的大致结论

表现： 父元素如果为Flex容器，且规定了高度，子元素将不能被孙子元素撑开高度。

结论： Flex布局渲染子项目高度（宽度）优先级，

1. CSS规定样式（height: 300px） 。
2. Flex容器为子项目自动分配的高度。
3. 子项目的子项目撑开的高度（如果2条件生效，则该条件失效。也就是说，只要父元素是Flex项目且父元素的父元素有固定高度 -- 父元素被优先渲染为了固定高度，然后便不会被子元素影响高度了）