宽度和 flex-basis 的区别

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>

这里 是一个例子，说明了我遇到的问题。我期望两行文字看起来一样，但当使用 flex-basis（第一行）时，弹性容器（.middle 元素）似乎忽略其子元素（.inner 元素）的内在宽度，只考虑文本。

这种差异可以在最新版本的Chrome、FF和Safari中观察到（但在IE11 / Edge中未观察到）。 澄清：我不是在问为什么IE11 / Edge会表现出这样的行为。它的行为（在这种情况下）实际上对我来说似乎是合理的。我想知道为什么其他所有浏览器都有差异。 更新：Edge 13的表现就像IE11一样。

- Dremora

---

这让我想起了 嵌套的 Flex 元素不会使父元素增长。 - Oriol

问题在重复问题的“浏览器错误”部分的被接受答案中得到解释。 - Michael Benjamin

正如我在回答我的问题时指出的那样，这种差异是由浏览器漏洞引起的。你所提到的答案并没有涉及到这一点，因此我认为我的问题不是重复的。 - Dremora

Answer 1

这似乎是一个 bug。 如果一个元素既是 flex 容器又是 flex 项目，并且子元素的内在尺寸是通过 flex-basis 设置的，那么它似乎会忽略子元素的内在尺寸，而选择测量子元素内容的宽度/高度。讽刺的是，IE11/Edge 是唯一正确实现此功能的浏览器。 Chromium bug 追踪器

- Dremora

Answer 2

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

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

flex-basis是容器可以拥有的最小宽度，然后根据其他规则进行增长/缩小。宽度不需要与flex和flex-basis同时使用，因为它们会影响跨浏览器的兼容性。

我还更新了您的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

- mattpark22

---

我知道行为不同，但是IE11的渲染方式对我来说更合理。此外，只有在使用简写的 flex 属性时才需要提供单位 - 我在这里使用完整的 flex-basis 属性（并且我仍然提供单位）。 - Dremora

我更新了我的回答，以便更好地解释它，如果有帮助，请告诉我。 - mattpark22

我已经再次更新了我的答案，请让我知道是否需要进一步的澄清 - 很乐意帮助 @Dremora - mattpark22

没有在外部容器上使用 display: flex，中间元素就不再是 flex 项目了 — 这消除了差异，但并不能解释它们为什么首先呈现不同。 - Dremora

它们呈现不同是因为它们是不同的浏览器，会以不同的方式解释您的代码。不幸的是，Internet Explorer在现代CSS3功能方面存在许多问题，因此我们必须聪明地编写代码。无法解释Internet Explorer的疯狂行为 - 在开发几年后，您将了解这一点！ - mattpark22

我知道IE经常表现得与预期不同，我已经在网络开发方面工作了10年。但在这种情况下，它的行为实际上对我来说似乎是合理的，所以我想知道其他浏览器中width和flex-basis之间差异的原因是什么。 - Dremora