multicol-clip-scrolled-content-001-ref.html (925B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Test: Multi-column element with scrolled content clipping (reference)</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 <style> 8 #columns { 9 column-width: 350px; 10 } 11 .spacer { 12 height: 200px; 13 width: 10px; 14 } 15 #outer { 16 border: 1px solid black; 17 overflow: scroll; 18 height: 300px; 19 width: 300px; 20 } 21 .inner { 22 overflow: scroll; 23 visibility: hidden; 24 } 25 .clipped_target { 26 width: 50px; 27 height: 50px; 28 } 29 </style> 30 31 <div class=spacer></div> 32 <div id=columns> 33 <div class=spacer></div> 34 <div id=outer> 35 <div class=inner> 36 <pre class=clipped_target> 37 scrollable 38 content 39 goes 40 here 41 </pre> 42 </div> 43 <div class=spacer></div> 44 <div class=spacer></div> 45 </div> 46 </div> 47 48 <script> 49 window.onload = () => { outer.scrollTop = 100; }; 50 </script> 51 </html>