[css-flexbox][css-align] Need clarification on auto margins for abspos flex children (do they collapse or expand) · Issue #665 · w3c/csswg-drafts (original) (raw)

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 auto margins 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.)