css - 如何准确计算 flex 元素的假设主要大小 - CSS Spec 问题

Question

我有固定宽度为 600px 的 flex 容器。它的 flex 元素有 flex-basis: 0具有 1px 边框和 16px 填充。根据规范，此类元素的 flex 基本大小应为 0(基于规范 https://www.w3.org/TR/css-flexbox-1/#algo-main-item 中的信息，E 部分之后的第一段)。此类元素的假设主要尺寸是多少？ 34 像素(边框 + 填充)，0px 还是 -34px？通过阅读规范，我并不完全确定这一点。
现在根据 Spec section 9.7 Resolving flexible lengths 计算 flex 元素大小时. flex 系数将为 flex-grow .根据我的实验，我猜测假设的主要尺寸实际上是 34 像素(不是 0 或 -34 像素)，因此元素不会被卡住。但是初始的可用空间不会是 600px(因为 flex-base 大小是 0)，而是只有 566px(我们从容器大小中提取了假设的主要大小，600px - 34px = 566px)。
这是正确的假设吗？

Answer 1

是，对的。在规范中，您可以阅读:

The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).

所以你的最小尺寸是 34px (填充和边框)并且该元素不会像您注意到的那样被卡住。如果您使用的是 flex-shrink:1 (这是默认值)和 flex-grow:0

.box {
  border:1px solid;
  display:flex;
  width:600px;
}
.box div {
  padding:16px;
  border:1px solid red;
  background:blue;
  flex-shrink:1;
  flex-basis:0;
}

.box span {
  width:100%;
  flex-grow:1;
  flex-basis:100%;
  background:green;
}

<div class="box">
<div></div> <span></span>
</div>

正如你所看到的，元素不会因为它被卡住而收缩。

if using the flex shrink factor: any item that has a flex base size smaller than its hypothetical main size