Difference between width and flex-basis

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.

This reminds me of [nested flex elements don't make parent grow](http://stackoverflow.com/q/36968138/1529630) — Oriol, Jul 11 '16 at 02:12
The problem is explained in the "Browser Bugs" section of the accepted answer in the duplicate. — Michael Benjamin, Sep 11 '18 at 00:22
As pointed out in my own reply to my question, the difference is explained by a browser bug. The answer you're referring to doesn't cover this, so I don't think my question is a duplicate. — Dremora, Sep 11 '18 at 16:30

Dremora · Accepted Answer · 2016-07-10T18:36:15.137

3

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

edited Jul 10 '16 at 18:36

answered Jul 07 '16 at 10:28

Dremora

167
10

mattpark22 · Answer 2 · 2016-07-06T15:35:48.187

-1

This is because IE11 supports flex differently (only partially support technically). IE 11 requires a unit to be added to the third argument, the flex-basis property see msdn documentation in the source below.

So flex shorthand declarations with unitless flex-basis values are ignored.

flex-basis is the minimum width, a container can have, then it will grow/shrink based on your other rules. Width does not need to be used at the same time as flex and flex-basis, as they conflict with X-browser compatibility.

I've updated your codepen also, to help explain. Please see here: http://codepen.io/mattpark22/pen/wWqKpz

Now you can see how differently browsers handle flex with:

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

I've also removed

display: flex;

from .outer - this was having an effect also.

Source: http://caniuse.com/#search=flex-basis

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

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

edited Jul 06 '16 at 15:35

answered Jul 06 '16 at 15:24

mattpark22

741
2
14
26

I understand that the behaviour is different, but the way IE11 renders seems more logical to me. Also, unit is only required to be provided when using the shorthand `flex` property — I'm using full `flex-basis` property here (and I provide unit anyway). – Dremora Jul 06 '16 at 15:26
I have updated my answer to help explain it better, please let me know if that helps? – mattpark22 Jul 06 '16 at 15:30
I have updated my answer again, please let me know if you need any further clarification - happy to help @Dremora – mattpark22 Jul 06 '16 at 15:37
Without `display: flex` on the outer container the middle element stops being the flex-item — which removes the difference but doesn't explain why they rendered differently in the first place. – Dremora Jul 06 '16 at 15:41
They are rendered differently because they are different browsers, that interpret your code differently, unfortunately Internet Explorer has many many issues with modern CSS3 functions, so we have to be clever about how with write it. It's not possible to explain the madness that is Internet Explorer - you'll learn this after developing for a few years! – mattpark22 Jul 06 '16 at 15:45
1

I know that IE often behaves not as expected, I've been developing for the web for the last 10 years. But in this case its behaviour actually seems logical to me, so I'm wondering what is causing the difference between `width` and `flex-basis` in other browsers. – Dremora Jul 06 '16 at 15:53

Difference between width and flex-basis

2 Answers2

Linked