宽度和柔性基础之间的差异

Question

我在行为之间遇到了差异,width而且flex-basis我无法解释它与flex-basis和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(第1行)时,flex容器(.middle元素)似乎忽略了它的子.inner元素(元素)的内在宽度,并且只考虑了文本.

在最新版本的Chrome,FF和Safari中可以观察到这种差异(但不是在IE11/Edge中).

澄清:我不是在问为什么IE11/Edge的行为方式如此.它的行为(在这种情况下)实际上对我来说是合乎逻辑的.我问为什么所有其他浏览器都有差异.

更新:Edge 13的行为与IE11类似.

Answer 1

这似乎是一个错误。既是 Flex 容器又是 Flex 项目的元素似乎会忽略其子级的内在尺寸（如果通过 进行设置）flex-basis，而是选择测量其子级内容的宽度/高度。讽刺的是，IE11/Edge 是唯一正确实现这一点的浏览器。

Chromium 错误追踪器