Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-flexbox][css-align] Need clarification on auto margins for abspos flex children (do they collapse or expand) #665

dholbert opened this issue Oct 29, 2016 · 5 comments


Copy link

The CSS Alignment & CSS Flexbox specs are unclear on the effects of auto margins on abspos flex children (and presumably grid children as well).


  • 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):

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.

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

Copy link
Member Author

Here's a version of my testcase with a block instead of a flexbox for the container:

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 tabatkins added the css-flexbox-1 Current Work label Nov 1, 2016
Copy link

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:auto resolves to 0 in 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.

Copy link

astearns commented 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

@fantasai fantasai added the css-position-3 Current Work label Feb 16, 2017
fantasai added a commit that referenced this issue Feb 16, 2017
… when finding the static position. (This statement should be generically applied in css-position, but that spec isn't maintained atm.)
@fantasai fantasai removed the css-flexbox-1 Current Work label Feb 16, 2017
Copy link

Edited a clarification into Flexbox. Removing Flexbox label to keep it open against Position.

triple-underscore added a commit to triple-underscore/ that referenced this issue Feb 18, 2017
Fix error introduced in earlier commit.

Define main size/cross size for flex containers. (Curre…

While the intrinsic sizing steps here guarantee that we…

Per w3c/csswg-drafts#665
, specify that auto margins are treated as zero…

Make propdef table more useful.

Restore accidentally-deleted text about table wrapper b…

Fix w3c/csswg-drafts#436

Fix main/cross mixup. #792

fantasai added a commit that referenced this issue Apr 28, 2020
@fantasai fantasai added css-flexbox-1 Current Work and removed Needs Edits labels Apr 28, 2020
Copy link

Edited into Position.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

4 participants