[csswg-drafts] [css-grid-1] Behavior of an item spanning several auto minimum tracks (#9075)

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

== [css-grid-1] Behavior of an item spanning several auto minimum tracks ==
(branched from the multi-track example in <https://github.com/w3c/csswg-drafts/issues/3565#issuecomment-465560900>)

Given [this example](https://jsfiddle.net/4edu3v7z/1/):
```html
<!doctype html>
<div class="grid">
  <div class="item" style="min-width: 20px">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
  </div>
 </div>
<style>
.grid {
  display: grid;
  grid: auto / minmax(auto, min-content) minmax(auto, 50px);
  float: left;
  border: 3px solid aqua;
}
.item {
  background: blue;
  grid-column: span 2;
}
.float {
  float: left;
  width: 25px;
  height: 50px;outline: dotted red;
}
body { width:0; }
</style>
<script>
for (let grid of document.querySelectorAll(".grid")) {
 let p = document.createElement("p");
  p.append("Columns: ", getComputedStyle(grid).gridTemplateColumns);
  grid.before(p);
}
</script>
```

Firefox and Chrome give different behavior: Chrome sizes the grid item to 20px, so the its float children overflow it, while Firefox sizes the grid item to 25px, exactly fitting the float children.

We believe the difference is that in [the step handling intrinsic minimums for spanning items](https://drafts.csswg.org/css-grid-1/#track-size-intrinsic-min), Chrome uses the "minimum size" always, while Firefox follows the second paragraph, which uses the "limited min-content contribution" when sizing under a min/max-content constraint (which is what's happening here, since the grid itself is floated as well).

If you remove the `body { width: 0; }` so the grid can grow to its max-content size, Chrome is consistent in its behavior - the two columns initially size to 10px each (splitting the 20px "minimum size"), then "Maximize Tracks" grows the second column to 50px, resulting in a 10px/50px columns and a 60px grid. It *should*, per spec, be 12.5px/50px, for a 62.5px grid instead.

(Firefox's behavior is a lot weirder, but this is likely because it's using the max-content contribution, like the spec previously said for the non-spanning case. The spec never said to use that for the spanning case, but carrying the behavior across was a reasonable mistake. We've removed that behavior, per WG resolution, in #3565.)

PROPOSAL: The spec is correct and impls should get fixed.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 17 July 2023 21:49:35 UTC