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

About this example:
> 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.

This doesn't render very well for grid either, as first tracks are treated as auto height, that gets you the intrinsic height of the grid container, then you resolve 33%, so probably some track will end up being smaller than what it was originally and you'll get overflow in the items (not the grid container, but overflow anyway).

I'm attaching the output of the following examples:
```html
<div style="display: grid; grid-template-rows: 33% 33%; gap: 33%; border: solid;">
  <div style="background: magenta;">foo</div>
  <div style="background: cyan;">bar</div>
</div>

<hr>

<div style="display: grid; grid-template-rows: 33% 33%; gap: 33%; border: solid;">
  <div style="background: magenta;">foo<br>bar</div>
  <div style="background: cyan;">baz</div>
</div>

<hr>

<div style="display: grid; grid-template-rows: 33% 33%; gap: 33%; border: solid;">
  <div style="background: magenta;">foo<br>bar<br>baz</div>
  <div style="background: cyan;">foobar</div>
</div>
```

![Screenshot of previous examples rendering in Chromium](https://user-images.githubusercontent.com/11602/82373979-b4b9e700-9a1e-11ea-9ee5-133e9010d4c5.png)

Not a great result IMHO, and dunno when something like this could be really useful for anyone.

-- 
GitHub Notification of comment by mrego
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5081#issuecomment-631059775 using your GitHub account

Received on Tuesday, 19 May 2020 20:19:27 UTC