Nested flexbox's flex-basis is ignored in favor of intrinsic content dimensions

[chearon]

Here's a flexbox bug that I don't see here, and can't find in any open PRs/issues.

A problem has been found when sizing flex items of a nested flex container.

When using the width property, the container respects the sizing of its children and expands accordingly. But when using flex-basis, the container ignores the sizing of its children, and the children overflow the container.

— SO answer (very end)

I made this example too (works in Edge): https://jsfiddle.net/q0qmeh3L/

Will make a PR if it will get accepted

[philipwalton]

Can you please update this issue to conform to the issue template. Saying the answer is at the end of a Stack Overflow question isn't particularly clear.

[garrettw]

#253 has something going on related to this.
I've boiled it down as far as I can: https://codepen.io/anon/pen/rvWRZX

In the latest Chrome and Firefox (at least), flex items in a nested flex container ignore their flex-basis and collapse.
IE11 and Edge, however, behave correctly.

@philipwalton it seems you yourself reported this to Chrome in 2015.
Your codepen: http://codepen.io/anon/pen/wBJQap
Looks like a different Chrome bug addresses the real root of the issue.

Relevant Firefox bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=1179454
https://bugzilla.mozilla.org/show_bug.cgi?id=972595
https://bugzilla.mozilla.org/show_bug.cgi?id=1055887

Workaround: it's not perfect, but you can set width instead of flex-basis to approximate the desired behavior.