[csswg-drafts] [css-grid] Reconsider the meaning of 1fr

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

== [css-grid] Reconsider the meaning of 1fr ==
We have been getting many [reports](https://jsfiddle.net/utasir/kxy06m6b/) from authors about potential bugs in our implementations related to the beaviour of fr units. The problem is that `1fr` right now means `minmax(auto, 1fr)` and that's something that is not very well known/understood by authors.

The fact that `auto` is the min track sizing function has a lot of implications and in some cases produce completely different results to the ones expected by web developers. There is a good example in the link above. I'll try to explain what's going on. This is a reduced version of the example for reference

 ```html
<html>
   <body>
      <label>Some text</label>
      <main>
         <div><p>Some long text...</p></div>
```

the `<html>` has a definite height. Then the `<body>` has `height: 100%` which is still definite. The `<body>` is a grid and its second row is `1fr`. There is a grid item (`<main>`) in that row which turns out to be a grid as well. That item is sized with `height:100%`. Intuitively a web author would think that particular height is still definite, because 1fr "naturally" resolves to the size of `<html>`as everything in between is `height: 100%`.

The "problem" is that `1fr`resolves to `minmax(auto, 1fr)` and this means that we **need** to know the size of `<main>` before resolving the size of the `1fr` track (because the min track sizing function is content sized, it's `auto`). As the height of `<main>` is a percentage of an indefinite size (remember that the track size is still not resolved) it must be treated as auto. That makes the `<main>` grow to fit their contents and effectively overflow the grid container (as the height of the contents is larger than the final value of `1fr`).

There is a quick solution to this issue from the author POV, just replacing `1fr` by `minmax(0px, 1fr)` for example. The thing is that apparently most authors expect 1fr to behave in a different way, they don't expect 1fr to respect the min-content contribution its contents but instead "use the available space if any". I do think we should provide the most "logical" behaviour from authors' POV as default instead of forcing them all to do this kind of "hacks" to achieve the desired results.

WDYT?


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

Received on Monday, 4 September 2017 08:56:12 UTC