- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Mon, 09 Mar 2020 15:27:21 +0000
- To: public-css-archive@w3.org
Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-grid][css-flex] Indefineteness when sizing grid tracks in a flexible flex item ==
Consider this [testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A.wrapper%20%7B%0A%20%20display%3A%20inline-flex%3B%0A%20%20flex-flow%3A%20column%3B%0A%7D%0A.height%20%7B%0A%20%20height%3A%2050px%3B%0A%7D%0A.min-height%20%7B%0A%20%20min-height%3A%2050px%3B%0A%7D%0A.grid%20%7B%0A%20%20flex-grow%3A%201%3B%0A%20%20display%3A%20grid%3B%0A%20%20background%3A%20red%3B%0A%7D%0A.content%20%7B%0A%20%20background%3A%20green%3B%20%0A%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20class%3D%22wrapper%20height%22%3E%0A%20%20%3Cdiv%20class%3D%22grid%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%20min-height%22%3E%0A%20%20%3Cdiv%20class%3D%22grid%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E):
```css
.wrapper {
display: inline-flex;
flex-flow: column;
}
.height {
height: 50px;
}
.min-height {
min-height: 50px;
}
.grid {
flex-grow: 1;
display: grid;
background: red;
}
.content {
background: green;
}
```
```html
<div class="wrapper height">
<div class="grid">
<div class="content">content</div>
</div>
</div>
<div class="wrapper min-height">
<div class="grid">
<div class="content">content</div>
</div>
</div>
```
| Firefox | Chromium |
| ------------- | ------------- |
|  |  |
In the `min-height` case, the flex container is forced to be at least 50px tall, and then the grid container is also 50px tall due to `flex-grow: 1`.
But then, how tall should the grid row be? https://drafts.csswg.org/css-grid/#algo-stretch says
> This step expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. If the free space is indefinite, but the grid container has a definite min-width/height, use that size to calculate the free space for this step instead.
It seems to me that the free space is indefinite, since the flex container has `min-height: 200px` instead of `height: 200px`, so https://drafts.csswg.org/css-flexbox-1/#definite-sizes doesn't apply
> If the flex container has a definite main size, a flex item’s post-flexing main size is treated as definite
And the grid container doesn't have a definite `min-height`. So the track shouldn't be stretched, and Chromium is right.
Something similar happens for block and flex layout. [Testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A.wrapper%20%7B%0A%20%20display%3A%20inline-flex%3B%0A%20%20flex-flow%3A%20column%3B%0A%7D%0A.wrapper.height%20%7B%0A%20%20height%3A%2050px%3B%0A%7D%0A.wrapper.min-height%20%7B%0A%20%20min-height%3A%2050px%3B%0A%7D%0A.container%20%7B%0A%20%20flex-grow%3A%201%3B%0A%20%20background%3A%20red%3B%0A%7D%0A.grid%20%7B%0A%20%20display%3A%20grid%3B%0A%7D%0A.flex%20%7B%0A%20%20display%3A%20flex%3B%0A%7D%0A.content%20%7B%0A%20%20background%3A%20green%3B%0A%20%20height%3A%20100%25%3B%0A%7D%0A%3C%2Fstyle%3E%0ABlock%3A%0A%3Cdiv%20class%3D%22wrapper%20height%22%3E%0A%20%20%3Cdiv%20class%3D%22block%20container%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%20min-height%22%3E%0A%20%20%3Cdiv%20class%3D%22block%20container%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cbr%2F%3E%3Cbr%2F%3EFlex%3A%0A%3Cdiv%20class%3D%22wrapper%20height%22%3E%0A%20%20%3Cdiv%20class%3D%22flex%20container%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%20min-height%22%3E%0A%20%20%3Cdiv%20class%3D%22flex%20container%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cbr%2F%3E%3Cbr%2F%3EGrid%3A%0A%3Cdiv%20class%3D%22wrapper%20height%22%3E%0A%20%20%3Cdiv%20class%3D%22grid%20container%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%20min-height%22%3E%0A%20%20%3Cdiv%20class%3D%22grid%20container%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Econtent%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E)
| Firefox | Chromium |
| ------------- | ------------- |
|  |  |
However, from https://crbug.com/1055258, some people expect the track to be stretched like in Firefox (and old Edge). So maybe the spec should be tweaked? Or should Firefox just fix their implementation?
Note this is not just for `grid-template-rows: auto`, the behavior is the same for `grid-template-rows: 1fr`. But with `grid-template-rows: 100%`, Chromium stretches the row just like Firefox.
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4852 using your GitHub account
Received on Monday, 9 March 2020 15:27:23 UTC