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

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

\n

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

\n

\n

百分比：相对于flex容器\xe2\x80\x99s内部主要尺寸^ref

\n

\n

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

\n

如果您更改 min-height 和 height ，两者的行为将相同：

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

\n

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

\n

\n

检查一下：flex: 1 是什么意思？\n并非所有浏览器都设置flex:1为等于flex:1 1 0

\n