弹性盒子中百分比高度的计算规则

先说，当时感觉这个特别有意思，问了身边一圈人，大家都没有注意过，觉得这是一个挺有意思的知识点。

又问了一个同事，同事一番点播，顿时恍然大悟。

基础知识不赘述了，什么弹性盒子啊，弹性盒子剩余空间怎么分配，高度百分比啊。单说弹性盒子嵌套百分比子节点这种特殊的组合。

这种组合很少见，通常情况下，使用到弹性盒子，都是通过子节点和flex相关属性，控制它在父容器中位置，大小。很少见本文提到的这种外层是弹性盒子，子节点却是高度百分比尺寸的情况。
布局很简单，一个红色背景的div，做父容器高度600px，flex，纵向；一个黄色子节点，固定高度300px；一个蓝色子节点，高度为百分比（下图是50%）：

css如下：

.container {
    height: 600px;
    width: 300px;
    background-color: red;
    display: flex;
    flex-direction: column;
  }

  .c1 {
    height: 300px;
    width: 250px;
    background-color: yellow;
    writing-mode: vertical-rl;
    color: blue;
  }

  .c2 {
    height: 60%;
    width: 200px;
    background-color: blue;
    writing-mode: vertical-rl;
    color: white;
  }

一切如常，c1固定高度 + c2百分比高度 * 父节点高度 = 600px，蓝色div高度就是其百分比乘以父节点高度。
当减小图中蓝色div高度百分比，也就是c1固定高度 + c2百分比高度 * 父节点高度 <= 600px时，蓝色div的高度，依然保持着百分比乘以父节点高度的计算规则。如图，将蓝色div百分比高度改为10%：

当改变蓝色div百分比至100%时，黄色区域，样式中固定高度是300px，布局分析器中，给它预分配的高度也是300px，但是黄色区域从文字情况，以及它超出蓝色宽度部分，可以看出，它最终渲染出来的尺寸，受到了压缩，高度只有200px；而蓝色区域的高度，也没有按照百分比乘以父节点高度的规则渲染。
看图：

多次调整蓝色区域高度百分比，它的实际高度变化情况如下：

蓝色区域高度百分比	蓝色区域实际高度
60%	327.27px
70%	350px
80%	369.23px
90%	385.72px
100%	400px

所以，当c1固定高度 + c2百分比高度 * 父节点高度 > 600px蓝色高度的计算规则是什么，一时让人看不出规律。

最后经大神点播，终于明确了在这种情况下，蓝色区域高度计算规则：

1. c2百分比高度 * 父节点高度 = c2理想高度
2. c2理想高度 + c1固定高度 = 父节点理想高度
3. c2理想高度 / 父节点理想高度 = c2实际百分比
4. c2实际百分比 * 父节点实际高度 = c2实际高度

将上述规则，应用到c2理想高度100%时，计算公式为：

100% * 600 / (100% * 600 + 300) * 600正好就是我们看到的400px ！

至此，弹性盒子中百分比尺寸计算规则，终于明晰了，扼腕赞叹！