overflow-auto-scrollbar-gutter-intrinsic-002-ref.html (1464B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow Reference: 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 8 <style> 9 .line { 10 display: flex; 11 } 12 .container { 13 block-size: 50px; 14 border: 5px solid black; 15 scrollbar-gutter: stable both-edges; 16 margin: 10px; 17 } 18 .hidden { 19 overflow: hidden; 20 } 21 .scroll-x { 22 overflow-x: scroll; 23 } 24 .scroll-y { 25 overflow-y: scroll; 26 } 27 .tall { 28 /* trigger overflow */ 29 block-size: 5000px; 30 } 31 </style> 32 33 <div class="line"> 34 <div class="container hidden"> 35 <div>I should not wrap</div> 36 </div> 37 38 <div class="container scroll-y"> 39 <div class="tall">I should not wrap</div> 40 </div> 41 </div> 42 43 <div class="line"> 44 <div class="container hidden" style="writing-mode: vertical-rl"> 45 <div>I should not wrap</div> 46 </div> 47 48 <div class="container scroll-x" style="writing-mode: vertical-rl"> 49 <div class="tall">I should not wrap</div> 50 </div> 51 52 <div class="container hidden" style="writing-mode: vertical-lr"> 53 <div>I should not wrap</div> 54 </div> 55 56 <div class="container scroll-x" style="writing-mode: vertical-lr"> 57 <div class="tall">I should not wrap</div> 58 </div> 59 </div> 60 </html>