先說，當時感覺這個特別有意思，問了身邊一圈人，大家都沒有注意過，覺得這是一個挺有意思的知識點，是個很好的素材，然后從抖音和B站上私信了程序員小山與bug，當然，沒有得到回復。

又問了一個同事，同事一番點播，頓時恍然大悟。

基礎知識不贅述了，什么彈性盒子啊，彈性盒子剩余空間怎么分配，高度百分比啊。單說彈性盒子嵌套百分比子節點這種特殊的組合。

這種組合很少見，通常情況下，使用到彈性盒子，都是通過子節點和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藍色高度的計算規則是什么，一時讓人看不出規律。

最后經大神點播，終于明確了在這種情況下，藍色區域高度計算規則：

c2百分比高度 * 父節點高度 = c2理想高度

c2理想高度 + c1固定高度 = 父節點理想高度

c2理想高度 / 父節點理想高度 = c2實際百分比高度

c2實際百分比高度 * 父節點實際高度 = c2實際高度

將上述規則，應用到c2理想高度100%時，計算公式為：

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

至此，彈性盒子中百分比尺寸計算規則，終于明晰了，扼腕贊嘆！

總結

以上是生活随笔為你收集整理的弹性盒子中百分比高度的计算规则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。