scrollbar-gutter-001-ref.html (1809B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>CSS Grid Reference: Subgrids with 'overflow' and/or 'scrollbar-gutter'</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 7 <style> 8 :root { 9 overflow: scroll; /* Required to reproduce the bug on Firefox */ 10 } 11 .grid { 12 display: inline-block; 13 inline-size: 75px; 14 border: 5px solid blue; 15 vertical-align: top; 16 } 17 .subgrid { 18 block-size: 75px; 19 } 20 .item { 21 inline-size: 50px; 22 block-size: 50px; 23 background: green; 24 } 25 fieldset { 26 margin: 0; 27 padding: 0; 28 border: 0; 29 } 30 </style> 31 32 <p>All the following subgrid scroll container shouldn't have any scrollbars.</p> 33 34 <p>Testcase 1: subgrid with 'overflow: scroll'</p> 35 <div class="grid"> 36 <div class="subgrid" style="overflow: scroll;"> 37 <div class="item"></div> 38 </div> 39 </div> 40 <div class="grid" style="writing-mode: vertical-rl;"> 41 <div class="subgrid" style="overflow: scroll;"> 42 <div class="item"></div> 43 </div> 44 </div> 45 46 <p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p> 47 <div class="grid"> 48 <div class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"> 49 <div class="item"></div> 50 </div> 51 </div> 52 <div class="grid" style="writing-mode: vertical-rl;"> 53 <div class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"> 54 <div class="item"></div> 55 </div> 56 </div> 57 58 <p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p> 59 <div class="grid"> 60 <div class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"> 61 <div class="item"></div> 62 </div> 63 </div> 64 <div class="grid" style="writing-mode: vertical-rl;"> 65 <div class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"> 66 <div class="item"></div> 67 </div> 68 </div>