scrollbar-width-paint-001-ref.html (1128B)
1 <!doctype html> 2 <style> 3 body { 4 display: flex; 5 flex-wrap: wrap; 6 } 7 8 .container { 9 scrollbar-gutter: stable; 10 flex: 0 0; 11 overflow: auto; 12 height: 200px; 13 min-width: 200px; 14 margin: 1px; 15 padding: 0px; 16 border: none; 17 background: deepskyblue; 18 } 19 20 .content { 21 height: 300px; 22 width: 300px; 23 } 24 25 .container.auto { 26 scrollbar-width: auto; 27 } 28 29 .container.thin { 30 scrollbar-width: thin; 31 } 32 33 .container.none { 34 scrollbar-width: none; 35 } 36 37 .content.plain { 38 background: red; 39 } 40 41 .content.gradient { 42 background: linear-gradient(135deg, red, blue); 43 } 44 </style> 45 <div id="one" class="container thin"> 46 <div class="content plain"></div> 47 </div> 48 <div id="two" class="container auto"> 49 <div class="content plain"></div> 50 </div> 51 <div id="three" class="container auto"> 52 <div class="content plain"></div> 53 </div> 54 <div id="four" class="container none"> 55 <div class="content gradient"></div> 56 </div> 57 <div id="five" class="container none"> 58 <div class="content gradient"></div> 59 </div> 60 <div id="six" class="container thin"> 61 <div class="content gradient"></div> 62 </div>