第 155 题：求最终 left、right 的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 600px;
    height: 300px;
    display: flex;
  }
  .left {
    flex: 1 2 500px;
    background: red;
  }
  .right {
    flex: 2 1 400px;
    background: blue;
  }
</style>

错误解： 因为子元素之和 400+500 = 900 > 父元素600
所以要按照flex-shrink来计算。
900 - 600 = 300
300/3 = 100
500 - 200== 300
400 - 100 = 300

正确解：
总权重 = （子元素宽度 * 子元素收缩系数）之和
溢出 = 子元素宽度之和 - 父元素之和
子元素收缩比例 = 子元素宽度 * 子项收缩系数 / 总权重
收缩宽度= 溢出 * 子元素收缩比例。

总权重 = 5002 + 4001 = 1400
溢出 = 400 + 500 - 600 = 300
.left收缩比例 = 5002/1400
.left收缩宽度 = 5002300/1400
.right收缩比例 = 4001/1400
.right收缩宽度 = 3004001/1400
最终.left宽度为 500 - 5002300/1400 = 285.71
.right宽度为 400 - 3004001/1400 = 314.29
以上结果进行过四舍五入。