Dremora Dremora - 4 months ago 29
CSS Question

Difference between width and flex-basis

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

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

Comments