Flex-grow 在具有子单位或分数值的浏览器中表现不一致

Question

Safari、Chrome 和 Firefox 对于以下代码有不同的结果：

<div class="container">
    <div class="box-1"></div>
    <div class="box-2"></div>
</div>

和 CSS:

.container {
    display: flex;
    width: 1000px;
}
.box-1 {
    flex: 0.5 0.5 0;
}
.box-2 {
    flex: 0.3 0.3 0;
}

两个盒子的弹性基础都是 0。这意味着剩余可用 space 是 1000px.

预期结果：

所有增长因子的总和为 0.5 + 0.3 = 0.8，因此剩余可用 space 将被划分为 1000px / 0.8 = 1250px。

每个盒子都会根据它们的生长因子得到一部分 space：

框的总宽度为 625 + 375 = 1000px，填满了整个 .container。 Safari 做对了。

实际结果：

Chrome 并且 Firefox 会将剩余的 space 除以最小因子 1，并且永远不会 0.8。所以剩余的可用 space 是 1000px / round(0.8) = 1000px.

然后，每个盒子都会根据它们的生长因子获得一部分 space：

框的总宽度为 500 + 300 = 800px，未填满整个 .container。我们剩下 200px.

的未分配 space

所以问题是：哪个浏览器正确，为什么？

Answer 1

只有剩余的免费space被分发，在这种情况下，因为所有弹性的总和增长因子小于1，计算方法是初始自由space乘以因子之和：1000px * 0.8 = 800px
每个 flex box 将收到剩余的空闲 space 乘以它们的 flex-grow 值占所有 flex-grow 值总和的比例

所以.box-1会得到800px * 0.5 / 0.8 = 500px；同样，.box-2 是 800px * 0.3 / 0.8 = 300px。 200px 的其余部分未分发。

Safari 10.1 缺少此计算，但 SafariTP 做对了。

Flex-grow behaves inconsistently across browsers with subunit or fractional values