计算以下两个子div的宽度大小：
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#div0 {width: 400px;height: 500px;background-color: aqua;display: flex;}#div0 div {width: 200px;height: 200px;}#div0 div:nth-child(1) {flex-basis: 30%;flex-shrink: 1;background-color: blue;}#div0 div:nth-child(2) {flex-basis: 90%;flex-shrink: 3;background-color: rgb(255, 251, 0);}</style>
</head><body><div id="div0"><div></div><div></div></div>
</body></html>
解析：
1、计算元素的溢出的部分
因为我们flex-basis用的百分比 ，首先先计算各占多少像素
元素一：0.3*400=120
元素二:0.9*400=360
所以他们两者总大小为：480
溢出部分：480-400=80
2、计算他们的总权重值
120*1+360*3=1200
3、分别计算收缩量
元素一：80*1*(120/1200)=8
元素二：80*3*(360/1200)=72
4、计算他们的大小
元素一：120-8=118
元素二：360-72=288
![[Visual Stuidio 2022使用技巧]2.配置及常用快捷键](https://i-blog.csdnimg.cn/direct/b77d60230ede4861aab11df33af268df.png)
