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

https://codepen.io/andreiduca/pen/ybOwWV

这两个框的弹性基础为0。这意味着剩余的可用空间为1000px。

预期结果：

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

每个框将根据其增长因子获得该空间的一部分：

• .box-1将获得1250px * 0.5 = 625px
• .box-2将获得1250px * 0.3 = 375px

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

实际结果：

Chrome和Firefox会将剩余空间除以最小系数1，而不是0.8。因此剩余的可用空间为1000px / round(0.8) = 1000px。

然后，每个盒子将根据它们的生长因子获得该空间的一部分：

• .box-1将获得1000px * 0.5 = 500px
• .box-2将获得1000px * 0.3 = 300px

框的总宽度为500 + 300 = 800px，而不是填充整个.container。我们留下了200px的未分配空间。

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

Answer 1

根据@LGSon的回答，在阅读规格100次后：https://www.w3.org/TR/css-flexbox-1/#remaining-free-space

• 只剩下剩余的可用空间，在这种情况下，因为所有flex-grow因子的总和小于1，所以从< em>初始可用空间乘以因子之和：1000px * 0.8 = 800px
• 每个弹性框将获得剩余的可用空间乘以其弹性增长值的比例与所有弹性增长值的总和

因此.box-1将获得800px * 0.5 / 0.8 = 500px;同样，.box-2是800px * 0.3 / 0.8 = 300px。 200px的其余部分未分配。

Safari 10.1缺少此计算，但SafariTP正确无误。