CSS flex-basis: 0% 与 flex-basis: 0px 有不同的行为

Question

根据MDN，flex: 1 的简写应该设置为flex-basis: 0。然而，它实际上设置了flex-basis: 0%，更令人惊讶的是它有不同的行为。

在下面的示例中，我希望 div.middle 收缩和滚动，因为它被赋予了 overflow-y: auto 和 flex: 1，这也应该暗示 flex-basis: 0。但它没有——整个身体反而滚动，因为它拒绝收缩。如果您取消注释显式 flex-basis: 0，它就会正常工作。

body {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.outer {
  min-height: 100%;
  display: flex;
  background: #99f;
  flex-direction: column;
}
.middle {
  background: #f99;
  flex: 1;
  /*flex-basis: 0;*/
  overflow-y: auto;
}

<div class='outer'>
  <div class='top'>top</div>
  <div class='middle'>
    A
    <div style='height:800px'></div>
    B
  </div>
  <div class='bottom'>bottom</div>
</div>

我在 Chrome 84.0 和 Firefox 68.11.0esr 中都对此进行了测试，它们都有相同的意外行为。

1. 为什么flex-basis: 0% 与flex-basis: 0 不同？
2. 为什么flex: 1 设置flex-basis: 0% 而不是flex-basis: 0？

Answer 1

这个问题与百分比的使用有关。使用0 或0px 很简单，因为您将初始高度设置为0，然后元素将增长以填充剩余空间。

使用N% 是另一回事，因为在这种情况下，您将初始高度设置为基于父高度。

百分比：相对于弹性容器的内部主要尺寸^ref

在您的情况下，flex 容器没有任何明确的大小，因为您只使用min-height 定义，因此我们无法解析百分比值，它将无法解析为auto

如果你用高度改变最小高度，两者的行为都会一样：

body {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.outer {
  height: 100%;
  display: flex;
  background: #99f;
  flex-direction: column;
}
.middle {
  background: #f99;
  flex: 1;
  /*flex-basis: 0;*/
  overflow-y: auto;
}

<div class='outer'>
  <div class='top'>top</div>
  <div class='middle'>
    A
    <div style='height:800px'></div>
    B
  </div>
  <div class='bottom'>bottom</div>
</div>

为什么 flex: 1 设置 flex-basis: 0% 而不是 flex-basis: 0？

检查这个：What does flex: 1 mean? 并非所有浏览器都将flex:1 设置为等于flex:1 1 0