[csswg-drafts] [css-grid] "Maximize Tracks" shouldn't distribute equally for flexible tracks (#3693)

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

== [css-grid] "Maximize Tracks" shouldn't distribute equally for flexible tracks ==
From https://drafts.csswg.org/css-grid/#algo-grow-tracks,

> If the free space is positive, distribute it equally to the base sizes of all tracks, freezing tracks as they reach their growth limits (and continuing to grow the unfrozen tracks as needed).

This step used not to be relevant for flexible tracks, because their growth limit is initially set to their base size.

However, since #2177, the growth limit can be increased in https://drafts.csswg.org/css-grid/#algo-spanning-flex-items

> Increase sizes to accommodate spanning items crossing flexible tracks: Next, repeat the previous step instead considering [...] all items that do span a track with a flexible sizing function while
> - treating flexible tracks as having a max track sizing function equal to their min track sizing function
> - [...]
> - distributing space to such tracks according to the ratios of their flexible sizing functions rather than distributing space equally

Therefore, consider https://jsfiddle.net/3kbz9j2g/

```html
<div id="grid">
  <div id="item"></div>
</div>
```
```css
#grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 3fr;
  border: solid;
}
#item {
  grid-column: 1 / 3;
  min-width: 0;
  height: 100px;
  background: cyan;
}
#item::before {
  content: '';
  display: block;
  width: 200px;
}
```

The minimum contribution of the item is 0 so it doesn't increase the base sizes of the tracks. But both tracks are treated as if they had an `auto` max track sizing function, so the max-content contribution of the item (200px) is distributed into growth limits, 50px to the first column and 150px into the 2nd one.

So we reach https://drafts.csswg.org/css-grid/#algo-grow-tracks as follows:

 - Free space: `100px`
 - 1st column: base size `0px`, growth limit `50px`.
 - 2nd column: base size `0px`, growth limit `150px`.

Then if the `100px` are distributed equally:

 - Free space: `0px`
 - 1st column: base size `50px`, growth limit `50px`.
 - 2nd column: base size `50px`, growth limit `150px`.

And https://drafts.csswg.org/css-grid/#algo-flex-tracks is no-op since the free space is 0.

So the column ratios end up being 1:1 instead of 1:3. This doesn't look good to me. I think that

 - either the "Maximize Tracks" should not distribute free space into flexible tracks, leaving this part to "Expand Flexible Tracks",
 - or it should distribute space according to the flex ratios instead of equally (considering non-flexible tracks to have a ratio of 0, and distribute equally if the sum of ratios is 0? Not sure).

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

Received on Friday, 1 March 2019 15:07:10 UTC