Re: [csswg-drafts] [css-grid-1] Track Sizing Algorithm question (#2873)

Okay, explaining the current behavior took some doing. [Here's a testcase showing it more simply:](http://software.hixie.ch/utilities/js/live-dom-viewer/saved/11888)

```html
<!doctype html>
<div class="container">
  <div class="item-head">
    <div class=block style="height: 20px;"></div>
  </div>
  <div class="item-body">
    <div class=block style="height: 80px;"></div>
  </div>
  <div class="item-side">
    <div class=block style="height: 150px"></div>
  </div>
</div>
<style>
.container {
  background-color: #fefefe;
  display: grid;
  grid-template-columns: 150px auto;
  grid-template-rows: min-content auto;
  grid-template-areas: 
    "head side"
    "body side";
}
.item-head {
  background-color: #d4edda;
  grid-area: head;
}
.item-body {
  background-color: #fff3cd;
  grid-area: body;
}
.item-side {
  background-color: #cce5ff;
  grid-area: side;
  overflow:hidden;
}
.block {
  width: 100px;
  background: #0002;
}
</style>
```

As you can see, the blue spanning item gives *all* of its content's height to the "min-content" track, and none to the "auto" track. This is the opposite of what the OP asks for, and is confusing to boot!

This happens because the blue item is scrollable (via `overflow:hidden`). This means it doesn't get an automatic minimum size. In [section 11.5, step 3.1](https://drafts.csswg.org/css-grid-1/#track-size-intrinsic-min), we distribute zero space, as that's the element's "minimum size". Then in step 3.2 we distribute min-content height, which is 150px, to the min-content track only - 150px to distribute, minus 100px of space already present in the track base sizes, means the "min-content" track grows by 50px. Then we're done, all items are considered and all space is distributed.

If the blue item is *not* scrollable, it has an auto min size of its min-content height, and so step 3.1 distributes that space to both tracks equally. We might still want to prioritize the auto track over the min-content track in this case. But it's not the problem OP is running into.

To address OP's problem, we need to address the fact that the auto track, which has absorbed the spanning item's minimum contribution (0px), isn't absorbing any of the spanning item's min-content contribution (150px). But it's not clear how to do that in the algorithm without breaking other expectations.

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


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

Received on Thursday, 27 July 2023 19:28:48 UTC