css - flex : 0, 上的转换有问题但仍在 flex : . 0001 上工作？

Question

在做一个小元素时，我偶然发现必须从 flex: 1 转换到 flex: 0。好一会才明白，原来就是为了这个，结果才坏掉的。经过一些测试后，我发现 flex 是可转换的，但如果它必须经过的其中一个值是 0 则不行。

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

.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 宽(空间的一半)，其余的留空。这种新行为为我们提供了良好的连续行为，一直到零，因此不再有不连续性，我们现在可以允许在任何 flex 值之间进行转换。

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