Difference between width and flex-basis [duplicate]

Question

I've encountered difference in behavior between width and flex-basis which I am not able to explain by 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 is the example illustrating the problem I'm having. I'm expecting both rows to look the same, however, when using flex-basis (row 1), the flex container (.middle element) seems to ignore intrinsic width of its child (.inner element) and only takes the text into account.

This difference can be observed in the latest versions of Chrome, FF and Safari (but not in IE11/Edge).

Clarification: I'm not asking why IE11/Edge behaves the way it does. Its behaviour (in this case) actually seems logical to me. I'm asking why there is difference in all other browsers.

Update: Edge 13 behaves just like IE11.

Answer 1

This seems to be a bug. An element which is both flex container and flex item seems to be ignoring intrinsic dimensions of its children if they are set via flex-basis, instead choosing to measure the width/height of contents of its children instead. It is ironic that IE11/Edge is the only browser implementing this correctly.

Chromium bug tracker