4. 求最终 left、right 的宽度

[fedono]

问题：

<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>

解法：

子元素的 flex-shrink 的值分别为 2，1
溢出：500+400 - 600 = 300。
总权重为 2 * 500+ 1 * 400 = 1400
两个元素分别收缩：
// 就是溢出的 300 乘以 left 在 shrink 之后(2 * 500)占据总的 (1400) 的比例，就是 left 需要减去的
300 * 2(flex-shrink) * 500(width) / 1400= 214.28
300 * 1(flex-shrink) * 400(width) / 1400= 85.72
三个元素的最终宽度分别为：
500 - 214.28 = 285.72
400 - 85.72 = 314.28

附加

如果container的宽度是1000px, left 和 right 的宽度是怎么计算的?

子元素的 flex-grow的值分别为 1，2
剩余空间：1000 - 500+400= 100。
子元素所得到的多余空间分别为：
100 * 1 / 3= 33.33
100 * 2 / 3 = 66.67
子元素最终宽度分别为：
500 + 33.33 = 533.33
400 + 66.67 =466.67

附加的是通过 flex-grow 来计算，因为 container 超出了 left 和 right 的总宽度了

参考

题目1
题目2