在 CSS3 中，flex-grow 0.1 的 flex 项应该占用所有额外空间还是仅占用 10%？

Question

下面的第三个 flex 项有一个flex-grow非零值，即0.1。这可能是合理的，我还读到了一个建议，它应该占据任何额外空间的 100%，因为其他 flex 项目是0，并且不能增长。这个是0.1，甚至0.1 / 0.1是 100%（作为一个比率）。然而，实际上在 Chrome 和 Firefox 上它只占用了 10% 的额外空间。为什么以及应该如何表现？

#container {
  display: flex;
  border: 1px dashed blue
}

#container div {
  border: 1px dashed orange
}

#container div:last-child {
  flex-grow: 0.1;
  background: #ccc
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Answer 1

然而，实际上在 Chrome 和 Firefox 上它只占用了 10% 的额外空间。

这是正确的行为。

找出项目的弹性增长因子与行上所有未冻结项目的弹性增长因子之和的比率。将项目的目标主要大小设置为其 flex 基本大小加上与比率成比例的剩余可用空间的一小部分。^flexbox-ref

由上可知，该flex-grow值有效地表示了可用空间的百分比，flex-grow: 1代表了 100% 的可用空间。此外，flex-grow相加后的大小是由这样的等式得出的。

弹性项目的基本尺寸+ (剩余可用空间* (弹性项目的弹性系数/未冻结弹性项目的弹性系数))

如果您flex-grow在问题的上下文中为0.1 指定，剩余可用空间将是初始可用空间的0.1 倍：

如果未冻结的弹性项目的弹性系数之和小于 1，则将初始可用空间乘以该总和。如果此值的大小小于剩余可用空间的大小，则将其用作剩余可用空间。^flexbox-ref

所以，使用上面的公式，第三个 flex item 的大小可以推导出如下：

弹性项目的基本大小 + (初始可用空间* 0.1 * (0.1 / 0.1))

= flex item 的基本大小 + (初始可用空间* 0.1 )

所以结果flex-grow: 0.1是初始剩余可用空间的10% 。