[csswg-drafts] [css-grid-2] Subgrid and scrollbars (#6350)

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

== [css-grid-2] Subgrid and scrollbars ==
css-grid-2 is explicit that the margin/border/padding of a subgrid gets taken into account in the sizing of its parent grid's tracks, and also that the overflow property does work on subgrids. However, it's not very clear that the size of the scrollbar gets taken into account as well.

Here's a bit of a contrieved example, first without a scrollbar:
```html
<div id=grid>
  <a></a><b></b>
  <div id=subgrid>
    <div id=item></div>
  </div>
</div>
<style>
#grid {
  display: grid;
  grid-template-columns: auto min-content;
  width: max-content;
}
#subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  border-right: solid 16px orange;
  padding-right: 16px;
  background: yellow;
  height: 100px;
  overflow: clip;
}
#item {
  background: blue;
  height: 150px;
  width: 100px;
}
b {
  background: teal;
  height: 16px;
}
a {
  background: pink;
  height: 16px;
}
</style>
```
Assuming I understand the spec correctly, the expected rendering is:
![Screen Shot 2021-06-04 at 14 03 47](https://user-images.githubusercontent.com/113268/120748412-b2e59780-c53d-11eb-8a4e-6bf9df2107fc.png)

This is indeed what Firefox does, as you can see in http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9360

Now, if we add `#subgrid { overflow-y: scroll; }`, I'd expect no difference to the layout in the case of overlay scrollbars, but in the case of classic scrollbars, I'd expect the scrollbar to be inserted between the yellow and the orange box, and which should make the the width of second grid column (and the teal box at the top) grow by the size of the scrollbar.

Assuming we agree on that, I'd also assume that
* if there was no padding or border on the subgrid, and only the scrollbar, it would still be in that second grid column, whose size would still take it into account.
* if we have overflow-y: auto rather than overflow scroll, the scrollbar would still be in that second grid column, whose size would still take it into account.

cc: @fantasai @Loirooriol

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


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

Received on Friday, 4 June 2021 05:12:30 UTC