Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<meta charset="utf-8">
<style>
:root {
overflow: scroll;
}
.grid {
display: inline grid;
grid-lanes-direction: row;
grid-auto-flow: column;
border: 5px solid blue;
vertical-align: top;
}
.subgrid {
block-size: 75px;
display: grid;
grid-template-rows: subgrid;
}
.item {
inline-size: 50px;
block-size: 50px;
background: green;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
</style>
<p>All the following subgrid scroll containers shouldn't have any scrollbars.</p>
<p>Testcase 1: subgrid with 'overflow: scroll'</p>
<div class="grid">
<fieldset class="subgrid" style="overflow: scroll;"><div class="item"></div></fieldset>
</div>
<div class="grid" style="writing-mode: vertical-rl;">
<fieldset class="subgrid" style="overflow: scroll;"><div class="item"></div></fieldset>
</div>
<p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p>
<div class="grid">
<fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>
<div class="grid" style="writing-mode: vertical-rl;">
<fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>
<p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p>
<div class="grid">
<fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>
<div class="grid" style="writing-mode: vertical-rl;">
<fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"><div class="item"></div></fieldset>
</div>