multicol-clip-scrolled-content-001.html (1010B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Test: Multi-column element with scrolled content clipping</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/> 6 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> 7 <link rel="match" href="reference/multicol-clip-scrolled-content-001-ref.html"/> 8 <style> 9 #columns { 10 column-width: 350px; 11 } 12 .spacer { 13 height: 200px; 14 width: 10px; 15 } 16 #outer { 17 border: 1px solid black; 18 overflow: scroll; 19 height: 300px; 20 width: 300px; 21 } 22 .inner { 23 overflow: scroll; 24 } 25 .clipped_target { 26 overflow: scroll; 27 background: red; 28 width: 50px; 29 height: 50px; 30 } 31 </style> 32 33 <div class=spacer></div> 34 <div id=columns> 35 <div class=spacer></div> 36 <div id=outer> 37 <div class=inner> 38 <pre class=clipped_target> 39 scrollable 40 content 41 goes 42 here 43 </pre> 44 </div> 45 <div class=spacer></div> 46 <div class=spacer></div> 47 </div> 48 </div> 49 50 <script> 51 window.onload = () => { outer.scrollTop = 100; }; 52 </script> 53 </html>