Description
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:
<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:
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 expect 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: autorather than overflow scroll, the scrollbar would still be in that second grid column, whose size would still take it into account.
cc: @fantasai @Loirooriol