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;
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  flex: 0 0 auto;
  display: flex;
  height: 100px;
.t1 {
  background-color: #333;
.t2 {
  background-color: #555;
  height: 200px;