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

However, in practice on Chrome and Firefox it only took 10% of the extra space.

这是正确的行为。

Find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line. Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio. ^flexbox-ref

从上面可以看出，flex-grow值有效的表示了空闲空间的百分比，flex-grow: 1代表了100%的空闲空间。另外，加入flex-grow后的大小也是由这样的等式推导出来的。

flex item's base size + (remaining free space * (flex item's flex factors / unfrozen flex item's flex factors))

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

If the sum of the unfrozen flex items’ flex factors is less than one, multiply the initial free space by this sum. If the magnitude of this value is less than the magnitude of the remaining free space, use this as the remaining free space. ^flexbox-ref

因此，使用上面的公式，第三个 flex 元素的大小可以推导如下:

flex item's base size + (initial free space * 0.1 * (0.1 / 0.1))

= flex item's base size + (initial free space * 0.1)

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