css – 宽度和弹性基础之间的差异

参见英文答案 > What are the differences between flex-basis and width?                                    3个
我遇到了宽度和柔性基础之间的行为差​​异,我无法在 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类似.

解决方法

这似乎是一个错误.
如果通过flex-basis设置了flex子容器和flex项目的元素,则忽略其子项的内在维度,而是选择测量其子项的内容的宽度/高度.具有讽刺意味的是IE11 / Edge是唯一正确实现此功能的浏览器.

Chromium bug tracker