宽度和弹性基础之间的区别[重复]

Question

我遇到了 width 和 flex-basis 之间的行为差​​异，What are the differences between flex-basis and width? 无法解释。

.outer {
  display: flex;
  background: yellow;
  padding: 10px;
}
.middle {
  display: flex;
  flex-shrink: 0;
  background: red;
  padding: 10px;
}
.inner {
  flex-basis: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;
}
.inner2 {
  width: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      hello
    </div>
  </div>
</div>

<div class="outer">
  <div class="middle">
    <div class="inner2">
      hello
    </div>
  </div>
</div>

Here 是说明我遇到的问题的示例。我希望两行看起来相同，但是，当使用 flex-basis（第 1 行）时，flex 容器（.middle 元素）似乎忽略了其子元素（.inner 元素）的内在宽度，并且只采用考虑到文本。

在最新版本的 Chrome、FF 和 Safari 中可以观察到这种差异（但在 IE11/Edge 中没有）。

澄清：我不是在问为什么 IE11/Edge 的行为方式如此。它的行为（在这种情况下）在我看来实际上是合乎逻辑的。我在问为什么所有其他浏览器都存在差异。

更新：Edge 13 的行为就像 IE11。

Answer 1

这似乎是一个错误。 如果通过flex-basis 设置，既是弹性容器又是弹性项目的元素似乎忽略了其子项的固有尺寸，而是选择测量其子项内容的宽度/高度。具有讽刺意味的是，IE11/Edge 是唯一正确实现这一点的浏览器。

Chromium bug tracker

Answer 2

这是因为 IE11 对 flex 的支持不同（技术上仅部分支持）。 IE 11 需要在第三个参数中添加一个单位，flex-basis 属性请参见下面源代码中的 msdn 文档。

因此，具有无单位 flex-basis 值的 flex 速记声明将被忽略。

flex-basis 是容器可以具有的最小宽度，然后它将根据您的其他规则增长/收缩。宽度不需要与 flex 和 flex-basis 同时使用，因为它们与 X 浏览器的兼容性相冲突。

我还更新了您的 codepen，以帮助解释。请看这里：http://codepen.io/mattpark22/pen/wWqKpz

现在您可以看到浏览器处理 flex 的方式有何不同：

flex-basis: 258px;
width: 258px;

我也删除了

display: flex;

来自 .outer - 这也有效果。

来源：http://caniuse.com/#search=flex-basis

来源：https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

来源：https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx