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 规范作者。

最初，规范规定您不能转换 to/from flex:0。这是因为 0 和非零 'flex-grow' 值之间存在巨大差异。例如，如果您的 flex 容器是 1000px 宽，而您的 flex 项目是 100px 宽，flex:0 将其保持在 100px，而 flex:.001 用于使其增长到完整的 1000px。（没有其他东西可以竞争 space ，所以它需要全部。）

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

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

flex: 0 上的过渡问题，但仍在 flex: .0001 上工作？

Problems with transition on flex: 0, but still working on flex: .0001?

css

google-chrome

flexbox

transition