`flex-basis: auto` sizes parent as if child were `flex-basis: auto`, when child is `flex-basis:10px`

Question

For example, you shouldn't be able to see the red of the parent here, but you do, because parent: 0 0 auto is sizing the parent to the auto width of its child content. You can see clearly though, the real width of its content is 10px, so shouldn't its auto sizing make the parent 10px as well?

body{
  display:flex;
}

#parent {
  flex: 0 0 auto;
  background-color: red;
}

#child {
  flex: 0 0 10px;
  background-color: grey;
}


div{ display:flex; min-width:0; min-height:0; overflow:hidden; } /*There's some weirdness described here, http://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size where flex elements default to min-width:auto, which could have caused problems here, but this doesn't change anything, so apparently this is not the issue*/

<div id="parent">
  <div id="child">childcontents</div>
</div>

This occurs in firefox and chrome, so presumably this is going to turn out to be correct somehow. I'd like to know how, so that I can stop it.

score 2 · Accepted Answer · answered Dec 09 '16 at 14:37

According to my understanding of the spec, this is a bug.

What Michael_B said is correct, first #parent is sized, and once its width is know, #child can flex. Since flexing usually involves growing or shrinking, the size of the flex container must be known before flexing the flex item; and the final size of the flex item may not be the flex basis, so the flex container shouldn't be sized using that value.

The solution is easy: use width instead of flex-basis. width does not flex, so it doesn't depend on the width of the container. Thus the container can use the width of their contents when sized.

body {
  display: flex;
}
#parent {
  flex: none;
  background-color: red;
}
#child {
  width: 10px;
  flex: none;
  background-color: grey;
}
div {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

<div id="parent">
  <div id="child">childcontents</div>
</div>

That said, in your case using flex-basis should work. That's because your flex item has both a zero flex grow factor and a zero flex shrink factor. It cannot grow nor shrink, it becomes directly frozen. Therefore it's possible to use consider the flex-basis when sizing the parent, and the spec says so:

9.9.3. Flex Item Intrinsic Size Contributions

The main-size min-content/max-content contribution of a flex item is its outer min-content/max-content size, clamped by its flex base size as a maximum (if it is not growable) and/or as a minimum (if it is not shrinkable), and then further clamped by its min/max main size properties.

The contribution of the ungrowable unshrinkable flex item is clamped by its flex base size both as a maximum and as a minimum. That is, the contribution is exactly the flex base size, which is defined as the flex basis when the flex basis is definite.

score 1 · Answer 2 · answered Dec 09 '16 at 13:03

It looks like the flex layout algorithm calculates the width of the flex container before arriving at the width of the flex items.

Hence, it determines the auto size of #parent based on the full width of #child.

Then it sizes #child to flex-basis: 10px.

At his point, however, the auto width of the parent has already been determined and is inflexible.

Testing in Chrome, re-arranging the rules makes no difference, so it doesn't appear to be a cascading issue.

This is my view of the behavior without an official reference to back it up. You may find the precise answer here: W3C Spec: Flex Layout Algorithm

`flex-basis: auto` sizes parent as if child were `flex-basis: auto`, when child is `flex-basis:10px`

2 Answers2