Flexbox：如果其他列无法收缩，为什么内容会拉伸列？

Question

我在容器中有三列。 我希望列始终具有相同的宽度 - 如果任何列中的内容要宽以保持相等的宽度，则应该应用溢出，但不要拉伸。

如果我使用flexbox，行为非常奇怪。对于flex: 1 0 auto宽内容，会拉伸列（由于其他列不允许缩小，因此不应该这样做。）

以下是1 0 auto的示例图像（橙色是宽内容块，蓝色/绿色/灰色是列）：

为什么会发生这种情况（为什么橙色框在右边有空格）？ 这是预期的行为吗？

请注意，我刚刚找到了一种解决方法（将宽度设置为0），因此我对解决方案不感兴趣 - 只是了解情况。

JSFiddle：http://jsfiddle.net/j7web/2/

HTML：

<div class="container">    
  <div class="x1"></div>    
  <div class="x2"></div>
  <div class="x3">
      <div class="wide"></div>
  </div>
</div>

CSS：

.container {
    width: 600px;
    height: 200px;
    display: flex;
    flex-direction: row;
}

.container > * {
    flex: 1 0 auto;
}

.wide {
    height: 100px;
    width: 300px;
    background-color: #ff9900;
}

.x1 { background: #3498db; }
.x2 { background: #2ecc71; }
.x3 { background: #c0c0c0; }

Answer 1

如果你看.container如果所有x#都没有宽度，那么在.wide中会有多少空的水平空间，你会看到有300px（600px总减去300px占用{{1} }}）。由于每个孩子都有flex-grow: 1，他们将在该空间中平等分享 - 也就是说，每个孩子将在其现有宽度上增加100px。因此，x3变为400px宽（其内容为300px，加上从flexbox计算得到的100px）。 flex: 1 0 0解决了这个问题，因为每个项目的初始空间计算宽度为0，剩下600px可用，三个项目共享。

Answer 2

Is this what you're trying to achieve?

.container > * {
    flex: 1 0 0;
}