Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-flexbox][css-align] Need clarification on `auto` margins for abspos flex children (do they collapse or expand) #665
The CSS Alignment & CSS Flexbox specs are unclear on the effects of
WHAT DO BROWSERS CURRENTLY DO:
TESTCASE (comparing normal flex items to abspos flex items, with "auto" margins):
Here's most relevant css-flexbox spec quote I could find:
This doesn't mention margins at all, and it leaves the implication that (a) the margin-box is what's aligned (just as with normal flex items) and (b)
Here's the most relevant css-align spec quote I could find:
This, too, doesn't make it clear that there would be any distinction between the handling of auto margins for abspos flex children vs. "real" flex items. (I suppose it depends on whether "laying out the element" includes "resolving auto margins", and (if so) what's expected to happen there.)
Here's a version of my testcase with a block instead of a flexbox for the container: https://jsfiddle.net/yyayrn3n/
Based on this testcase, it looks like browsers interoperably collapse "auto" margins on abspos children of CSS blocks. So, I suspect Chrome/Edge's analogous flexbox behavior is sensible (in that it's consistent with the traditional special-zeroing of auto margins on abspos elements in other contexts).
So, I think the alignment spec just needs a bit of clarification to make this more explicit, since IMO it's not at all clear (from the spec) that this behavior is correct right now.
I was very confused by this topic, because the margins aren't "collapsing" in the sense of the technical term "collapsing margins". ^_^
Anyway, margins are indeed part of "laying out", but if browsers are interoperable with something else, and they do the same with other layout modes, then, uh, sure, might as well define that