flex-shrink相关计算题

请计算left和right的宽度。

<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 的缩写： flex-grow、flex-shrink、flex-basis。

• flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
• flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
• flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

子元素的 flex-shrink 的值分别为 2，1
溢出：500+400 - 600 = 300。
总权重为 2 * 500+ 1 * 400 = 1400

两个元素分别收缩：
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