Re: [csswg-drafts] [css-align] percentage gap definition should be clearer for the block direction (#4664)

Compare this corresponding Grid testcase:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=7661
Firefox and Chrome agrees on the layout of this test and it renders exactly as your Flexbox testcase does in Firefox.

The relevant spec for this is the section on cyclic percentages in [css-sizing](https://drafts.csswg.org/css-sizing-3/#percentage-sizing). (Which could definitely be improved by explicitly including the gap properties in the text there (the table in d.), but I think it's clear it should use the same rules as padding/margin (although it has a different percentage basis).)

So, I think a cyclic percentage gap should follow the "a cyclic percentage is resolved against zero for determining intrinsic size contributions" under d. And then, the last bullet says: "Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block)."
I think that's the spec text that applies in the Grid case.

Is there any reason a block-axis gap in Flexbox should behave differently to Grid?

Fwiw, @mrego  and @dholbert  agreed this is the right layout back when we implemented [gaps for Flexbox in Gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=1398483#c31).

-- 
GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4664#issuecomment-573240354 using your GitHub account

Received on Friday, 10 January 2020 23:06:33 UTC