Re: [csswg-drafts] [css-grid-1] Empty grid tracks should contribute to scrollable overflow (#3638)

If I'm not missing anything, the spec defines quite clear in the [5.2. Sizing Grid Containers](https://drafts.csswg.org/css-grid/#intrinsic-sizes) section how a grid container should be sized. The only reference to the tracks being used in the grid container sizing logic is the following one:

> The max-content size (min-content size) of a grid container is the sum of the grid container’s track sizes (including gutters) in the appropriate axis, when the grid is sized under a max-content constraint (min-content constraint).

The statement above determines how to compute the grid container's **intrinsic size** (lets assume for simplicity that we have such concept of _intrinsic height_), which as far as I know, it's the size we can compute **without performing a layout**.

I couldn't find any other reference about tracks being used to size the grid container. The example of paddings doesn't fit in this case because they contribute to the box's size but not to the box's content, like this new behavior seems to imply with the tracks.

Lets consider the following example:

`<div style="display: grid; grid: 100px 100px / 200px 200px; overflow: auto; width: 300px, height: 100px; background: grey"></div>`

Do we really want to show both vertical and horizontal scrollbars even there is no item inside the grid ? Even the horizontal bar ? 

What if  we add an item in the cell (1,1) ? 

```
<div style="display: grid; grid: 100px 100px / 200px 200px; overflow: auto; width: 300px; height: 100px; background: grey">
   <div style="width: 50px; height: 50px; background: blue;"</div>
</div>
```

The scrolls would indicate that there are items in the grid areas out of the scrolling area, but that's not the case.

If we add an item i the cell (1,3) we really want to show the vertical scroll, since the item is bellow the scrolling area's height.

```
<div style="display: grid; grid: 100px 100px / 200px 200px; overflow: auto; width: 300px; height: 100px; background: grey">
   <div style="width: 50px; height: 50px; background: blue; grid-row: 3"</div>
</div>
```

However, we already would have both scroll bars visible because of the tracks. A similar example could be done in for the horizontal bar.




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

Received on Friday, 15 February 2019 18:01:37 UTC