[css-align] percentage gap definition should be clearer for the block direction

[cbiesinger]

https://drafts.csswg.org/css-align-3/#propdef-row-gap

Consider this testcase:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=7659
Should the flexbox height (the black border) expand to include the full flex line?

There is an indefinite height. The pre-gap flexbox height would be 100px. What Firefox does is compute the gap at 50% * 100px = 50px, so the content is now 150px high, but it keeps the flexbox height at 100px.

The spec should be clearer on how this works:

• Should percentages resolve against an indefinite height?
• If yes, should it affect the intrinsic block size of the flex container?

cc @dholbert

[MatsPalmgren]

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

[mrego]

Yeah we had long discussions about this thing on grid layout: #509 and #1921.

So when Firefox was implementing gaps for flexbox I suggested we should keep consistency with what we are doing for grid layout, and people seem to agreed.

I believe it's good we keep a similar behavior in both flex and grid, despite it can be strange in some cases it'd be better than having different ones.

[cbiesinger]

OK, so it seems clear that the Firefox behavior is what's desired.

However, I disagree that css-sizing is the right spec for this. gaps are not sizing... At the very least there should be a non-normative note in css-align about this, but I really do think that it should be defined there.

I guess what I would like is a definition of this in terms of the flexbox algorithm:
https://drafts.csswg.org/css-flexbox/#layout-algorithm

I suppose from a spec perspective the argument is that flexbox block sizes should first be determined based on https://drafts.csswg.org/css-flexbox/#intrinsic-sizes and percentages then resolve based on that. Unfortunately no browser implements that yet, making this harder.

[cbiesinger]

(cc @davidsgrogan )

[fantasai]

@cbiesinger We added some cross-links. Let me know if it's acceptable, or if you want something else.

Wrt handling of gaps in the flexbox algorithm generally, we need to draft up a Flexbox Level 2 to do that properly. It's on the to-do list... but basically they can be treated similar to margins on the flex items.

[cbiesinger]

@fantasai Thanks. If I understand correctly, gap percentages against an indefinite size resolve to zero. SGTM