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

Open
dholbert opened this Issue Oct 29, 2016 · 4 comments

Comments

Projects
None yet
4 participants
@dholbert
Contributor

dholbert commented Oct 29, 2016

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

@dholbert

This comment has been minimized.

Contributor

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

This comment has been minimized.

Member

tabatkins commented 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: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.

@astearns

This comment has been minimized.

Member

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

@astearns astearns added Needs Edits and removed Agenda+ labels Dec 5, 2016

fantasai added a commit that referenced this issue Feb 16, 2017

[css-flexbox] Per #665, specify that auto margins are treated as zero…
… 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 label Feb 16, 2017

@fantasai

This comment has been minimized.

Contributor

fantasai commented Feb 16, 2017

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

triple-underscore added a commit to triple-underscore/triple-underscore.github.io that referenced this issue Feb 18, 2017

[css-flexbox] 各種更新
Fix error introduced in earlier commit.
w3c/csswg-drafts@d09288f
464962a3fe6

Define main size/cross size for flex containers. (Curre…
w3c/csswg-drafts@0c8e129
c108da74e59

While the intrinsic sizing steps here guarantee that we…
w3c/csswg-drafts@e65d3f6
4b0960a2711

Per w3c/csswg-drafts#665
, specify that auto margins are treated as zero…
w3c/csswg-drafts@4fae49a
7107d447f4d

Make propdef table more useful.
w3c/csswg-drafts@25a917b
794ecdd1be0

Restore accidentally-deleted text about table wrapper b…
w3c/csswg-drafts@277d9d3
3a6582f26f9

Fix w3c/csswg-drafts#436
w3c/csswg-drafts@e377000
0eea2daade6

Fix main/cross mixup. #792
w3c/csswg-drafts@16d913f
260279f52b1

変更点の節を別ページに分離
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment