在 flex: 0 上转换时出现问题，但仍在 flex: .0001 上工作？

Question

在从事一个小项目时，我偶然发现必须从 过渡flex: 1到flex: 0. 我花了一段时间才明白，只是为了这个，结果才被打破。经过一番测试后我发现flex是可以转换的，但如果它必须经历的值之一是 0，则不能转换。

例如，从flex: 1到flex: .0001有效，几乎给了我相同的结果，但对我来说这似乎是一个黑客。我想了解为什么会这样，因为我找不到也没有想到任何好的解释。

.container1, .container2 {

  display: flex;
  display: -webkit-flex;
  
  height: 100px;
  width: 200px;
}

.container1 > div, .container2 > div {
  
  flex: 1;
  -webkit-flex: 1;
  
  transition: flex 1s, -webkit-flex 1s;
  -webkit-transition: flex 1s, -webkit-flex 1s;
  
  height: 100%;
}
.container1 > div:hover {

  
  flex: 0;
}
.container2 > div:hover {

  flex: .00001;
}

.a { background-color: blue }
.b { background-color: red }

<p> hover to activate the transition </p>

<p> doesn't work with a final flex of 0 </p>
<div class="container1">
  <div class="a"></div>
  <div class="b"></div>
</div>

<p> works with a final flex of .000001 </p>
<div class="container2">
  <div class="a"></div>
  <div class="b"></div>
</div>

我使用的是 Chrome 43，尚未在其他浏览器上进行测试。

您能否给我一个有效的解释，解释为什么会出现这种情况，或者这是否是一个错误？

Answer 1

Flexbox 规范作者在这里。

最初，规范规定您不能转换到/从 flex:0。这是因为 0 和非零“flex-grow”值之间存在巨大差异。例如，如果您的 Flex 容器宽度为 1000px，Flex 项目宽度为 100px，则 flex:0 会将其保持在 100px，而 flex:.001 用于使其增长到完整的 1000px。（没有其他东西可以与它竞争空间，所以它会占据整个空间。）

一两年前我修复了这个问题，因此小于 1 的 Flex 值不会尝试占用所有可以占用的空间；相反，他们尝试占用可用空间的相应部分。在前面的示例中，如果项目是 flex:0.5，它只会扩展到 500px 宽（一半空间），并将其余部分留空。这种新行为为我们提供了一直到零的良好连续行为，因此不再存在不连续性，并且我们现在可以允许任何弹性值之间的转换。

是的，这是一个 Chrome 错误；我们尚未将我们的行为更新为新的规范文本。请举报！