Flexbugs: Can't nest vertically wrapping flex boxes

[shans]

..at least in Firefox and Chrome, where the inner vertically wrapping flex box is only as wide as its first column, so the second outer column partially occludes the first.

[kumarharsh]

Please post a reproducible example which makes the reported issue clear.

[shans]

Here is a more general example showing that vertically wrapping flex boxes can't stack side-by-side in any context without the potential for content occlusion:

http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=4179

Note that there should be 2 lime green boxes with text 'bar'. Remove the flexbox styling to see where the second is.

[kumarharsh]

Hmm, yes I've seen this too. Funnily enough, it works perfectly in Edge and IE11!

[gregwhitworth]

Not entirely sure why that's funny, we're doing the layout to get the correct size of the flex main and cross axis dimensions to shrink wrap around, Chrome/FF are not. @shans what was the workaround again?

[shans]

The workaround, if you want to call it that, is to explicitly size the columns and manually assign items to them :(

[gregwhitworth]

Looking at it, this is slightly similar to the unfortunate min-height issue and results in needing to use explicit without allowing for auto. I'll assign to myself to write up the "workaround" based on @shans feedback. Thanks @shans for letting us know about the issue and keep @philipwalton and I posted on the issue in Blink if you ever get around to fixing it. Do you have a crbug for this?

[kumarharsh]

@gregwhitworth I used funny to underline the fact that it works properly in IE, and not in the _supposedly_ more advanced browsers.

[gregwhitworth]

I'll need to look into it a little bit because this merge has more to do with how the content measuring is done in each engine. Edge is the only engine that does true layout, so what you're looking for specifically with this merge is if the height is correct in a column flex. I would agree that this seems busted at first glance, but I'll want to sit down and go through the algo step by step with the flex basis at 0% because if you set it to auto it works fine: http://codepen.io/gregwhitworth/pen/pbowqM

Not saying it isn't possibly a bug, but I doubt it has the same root cause although shows a similar end user behavior. Once I have a chance to investigate it I'll reply to the thread.