overflow-auto-scrollbar-gutter-intrinsic-001.html (1380B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow Test: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> 7 <link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-001-ref.html"> 8 9 <style> 10 .line { 11 display: flex; 12 } 13 .container { 14 block-size: 50px; 15 border: 5px solid black; 16 overflow: auto; 17 scrollbar-gutter: stable; 18 margin: 10px; 19 } 20 .tall { 21 /* trigger overflow */ 22 block-size: 5000px; 23 } 24 </style> 25 26 <div class="line"> 27 <div class="container"> 28 <div>I should not wrap</div> 29 </div> 30 31 <div class="container"> 32 <div class="tall">I should not wrap</div> 33 </div> 34 </div> 35 36 <div class="line"> 37 <div class="container" style="writing-mode: vertical-rl"> 38 <div>I should not wrap</div> 39 </div> 40 41 <div class="container" style="writing-mode: vertical-rl"> 42 <div class="tall">I should not wrap</div> 43 </div> 44 45 <div class="container" style="writing-mode: vertical-lr"> 46 <div>I should not wrap</div> 47 </div> 48 49 <div class="container" style="writing-mode: vertical-lr"> 50 <div class="tall">I should not wrap</div> 51 </div> 52 </div> 53 </html>