Repository navigation
[css-flexbox][css-align] Need clarification on auto margins for abspos flex children (do they collapse or expand) #665
Description
The CSS Alignment & CSS Flexbox specs are unclear on the effects of auto margins on abspos flex children (and presumably grid children as well).
WHAT DO BROWSERS CURRENTLY DO:
- Chrome & Edge both seem to treat
automargins as "0", on abspos flex children. (unlike on normal flex items) - Firefox's current abspos-flex-child implementation is based on older spec text, so don't pay attention to it. (I'm on the verge of landing an updated implementation, and I just ran across this inconsistency between my initial interpretation & what Chrome/Edge do.)
TESTCASE (comparing normal flex items to abspos flex items, with "auto" margins):
https://jsfiddle.net/h5mtn6wa/
Here's most relevant css-flexbox spec quote I could find:
The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size.
https://drafts.csswg.org/css-flexbox-1/#abspos-items
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) auto margins should be honored, since this is what happens for flex items. So, superficially this seems to disagree with Chrome/Edge.
Here's the most relevant css-align spec quote I could find:
6.2. Block/Cross-Axis Alignment: the align-self property
[...]
6.2.3. Static Position of Absolutely-Positioned Boxes
Alignment Subject | The element’s margin box after laying out the element, treated as fixed-size for the purpose of alignment.
https://drafts.csswg.org/css-align-3/#align-abspos-static
[...]
6.2.5. Flex Items
Alignment Subject | The flex item’s margin box.
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.)
Activity
dholbert commentedon Oct 29, 2016
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.
tabatkins commentedon Nov 30, 2016
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
margin:autoresolves to0in abspos contexts while figuring out the static position. This should probably go in the Position draft, as it looks to be a generic property of finding the static position, rather than something specific to finding the static position within a given type of parent.astearns commentedon Dec 5, 2016
RESOLVED: For all layout modes when you're figuring out static position of an abspos child treat auto margins as 0 regardless of normal positioning rules.
This needs to be edited in to css-position by @atanassov and CSS 2 errata by @bert-github
[css-flexbox] Per #665, specify that auto margins are treated as zero…
fantasai commentedon Feb 16, 2017
Edited a clarification into Flexbox. Removing Flexbox label to keep it open against Position.
[css-flexbox] 各種更新
[css-position-3] Specify that auto margins are treated as zero for ca…
fantasai commentedon Apr 28, 2020
Edited into Position.