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

dholbert has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-flexbox][css-align] Need clarification on `auto` margins for 
abspos flex children (do they collapse or expand) ==
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.)

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/665 using your GitHub 
account

Received on Saturday, 29 October 2016 16:29:09 UTC