W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2017

[csswg-drafts] [css-grid] New stretch "auto" tracks steps needs more text for indefinite height grid containers

From: Manuel Rego Casasnovas via GitHub <sysbot+gh@w3.org>
Date: Fri, 13 Oct 2017 09:32:29 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-265226380-1507887134-sysbot+gh@w3.org>
mrego has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] New stretch "auto" tracks steps needs more text for indefinite height grid containers ==
In issue #1150 we added a new step to the Grid Track Sizing algorithm: [11.8. Stretch auto Tracks](https://drafts.csswg.org/css-grid/#algo-stretch).

We've implemented that in Blink and WebKit but found a [regression](https://bugs.chromium.org/p/chromium/issues/detail?id=773625) due to this change.
The example is really simple (the trick is in the `min-height` part):
```html
<div style="display: grid; min-height: 200px; border: solid thick;">
  <div style="background: cyan; font: 20px/1 Monospace">item</div>
</div>
```

![Current status vs expected one](https://user-images.githubusercontent.com/11602/31539680-a7a6bc98-b009-11e7-9aa3-9a81bb649a24.png)

In this case the height of the grid container is indefinite, the size of the row is calculated as the height of the text (20px) . Then when we are in the *Stretch auto Tracks* step we don't stretch the track as the free space is not definite.
The expected result is that the row has 200px height, however it has just the text height (20px).

The problem is that this new step lacks some text like the one we have for [flexible tracks](https://drafts.csswg.org/css-grid/#algo-flex-tracks):
> If using this flex fraction would cause the grid to be smaller than the grid container’s min-width/height (or larger than the grid container’s max-width/height), then redo this step, treating the free space as definite and the available grid space as equal to the grid container’s content box size when it’s sized to its min-width/height (max-width/height).

I believe we'd need to add something like this to the new step too, to avoid this issue.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1866 using your GitHub account
Received on Friday, 13 October 2017 09:32:16 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:19 UTC