search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 494 forks source link

Can't nest vertically wrapping flex boxes #150

Open shans opened 8 years ago

shans commented 8 years ago

..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 commented 8 years ago

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

shans commented 8 years ago

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 commented 8 years ago

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

gregwhitworth commented 8 years ago

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 commented 8 years ago

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

gregwhitworth commented 8 years ago

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 commented 8 years ago

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

gregwhitworth commented 8 years ago

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.