[css-flexbox][css-align] Need clarification on auto margins for abspos flex children (do they collapse or expand)
#665
Comments
|
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 |
|
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 |
… when finding the static position. (This statement should be generically applied in css-position, but that spec isn't maintained atm.)
|
Edited a clarification into Flexbox. Removing Flexbox label to keep it open against Position. |
Fix error introduced in earlier commit. w3c/csswg-drafts@d09288fcbc10d5822b47ed79acb3e 464962a3fe6 Define main size/cross size for flex containers. (Curre… w3c/csswg-drafts@0c8e1299da753cd89ee16efef5033 c108da74e59 While the intrinsic sizing steps here guarantee that we… w3c/csswg-drafts@e65d3f6509e0ded90cf000d9ee4df 4b0960a2711 Per w3c/csswg-drafts#665 , specify that auto margins are treated as zero… w3c/csswg-drafts@4fae49af5c426755c0ce6df6eadb3 7107d447f4d Make propdef table more useful. w3c/csswg-drafts@25a917b6b089e7e53524463561d82 794ecdd1be0 Restore accidentally-deleted text about table wrapper b… w3c/csswg-drafts@277d9d341ca6c5d8fd341342cfb91 3a6582f26f9 Fix w3c/csswg-drafts#436 w3c/csswg-drafts@e377000a95363800f3d945358aee8 0eea2daade6 Fix main/cross mixup. #792 w3c/csswg-drafts@16d913f1b48e09bc3e7f9eb3b3928 260279f52b1 変更点の節を別ページに分離
|
Edited into Position. |
The CSS Alignment & CSS Flexbox specs are unclear on the effects of
automargins on abspos flex children (and presumably grid children as well).WHAT DO BROWSERS CURRENTLY DO:
automargins as "0", on abspos flex children. (unlike on normal flex items)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:
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)
automargins 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:
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.)
The text was updated successfully, but these errors were encountered: