overflow-area-003-ref.html (1462B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Flexible Box Layout Reference: Test flex container's overflow rect</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 8 <style> 9 .set { 10 clear: both; 11 margin: 1em; 12 } 13 14 .test { 15 display: flex; 16 padding: 10px; 17 width: 60px; 18 height: 60px; 19 background: teal; 20 margin: 0.5em; 21 float: left; 22 } 23 </style> 24 25 <p>Test passes if all the teal boxes have no scrollbars.</p> 26 27 <!-- This set tests emply flex containers. --> 28 <div class="set"> 29 <div class="test"></div> 30 <div class="test"></div> 31 <div class="test"></div> 32 <div class="test"></div> 33 </div> 34 35 <!-- This set tests flex containers having only abs-pos children, but no flex items. --> 36 <div class="set"> 37 <div class="test"></div> 38 <div class="test"></div> 39 <div class="test"></div> 40 <div class="test"></div> 41 </div> 42 43 <!-- This set tests flex containers having a small centered flex item. --> 44 <div class="set"> 45 <div class="test"></div> 46 <div class="test"></div> 47 <div class="test"></div> 48 <div class="test"></div> 49 </div> 50 51 <!-- This set tests flex containers having a relative positioned flex item. --> 52 <div class="set"> 53 <div class="test"></div> 54 <div class="test"></div> 55 <div class="test"></div> 56 <div class="test"></div> 57 </div> 58 </html>