[csswg-drafts] [css-sizing] Make flex % row-gap resolve to 0 when height is indefinite (only flex, not grid) (#5081)

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

== [css-sizing] Make flex % row-gap resolve to 0 when height is indefinite (only flex, not grid) ==
(The terminology here assumes horizontal writing mode)

% row-gaps in an indefinite-height container are specified to resolve against the container's intrinsic height. This currently applies to both flex and grid.

For grid, this can be used with % grid tracks to make a sensible layout. E.g.

height: 33% row track
height: 33% row-gap
height: 33% row track

This makes the gap and rows the same height and the grid container does not have overflow. There's a nice match here: % tracks and % gaps resolve off the same height.

The same is not true for flex. For example,

```html
<div style="display: flex; flex-flow: column; height: auto; row-gap: 33%">
  <div class="flexitem" style="height:33%">some subtree</div>
  <div class="flexitem" style="height:33%">another subtree</div>
</div>
```

The items and gaps will not have the same size; there is no match like grid has. Items' % heights in an indefinite height flexbox resolve to 0. Further, the flex container will have overflow. In flex, using % row-gaps as specified now makes the flex container always have overflow.

This illuminates an inconsistency between flex and grid. Grid % gaps resolve the same as the things they add space between: tracks. Flex % gaps are not, they are their own beast.

Let's fix the inconsistency by prescribing that %gaps are resolved the same as their ~siblings, which is items for flex and tracks for grid. This would result in no changed grid behavior, because grid already does the right thing. There would also be no changed flex col-gap behavior. The only change is % flex row gaps would resolve to 0 when the flexbox has an indefinite height.

I don't know where this change would live. Maybe https://drafts.csswg.org/css-align/#column-row-gap. Maybe the first bullet point after the table in https://drafts.csswg.org/css-sizing-3/#min-percentage-contribution ?

/cc @chrishtr 

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

Received on Monday, 18 May 2020 21:29:31 UTC