CSS flex-basis：0％与flex-basis：0px具有不同的行为

如何解决CSS flex-basis：0％与flex-basis：0px具有不同的行为

根据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？

解决方法

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

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

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

对于您来说，flex容器没有任何显式的大小，因为您仅使用min-height定义，因此我们无法解析percentange值，它将无法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