overflow-area-001-ref.html (2034B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: scrollable overflow area (LTR)</title> 3 <style> 4 5 .set { 6 clear: both; 7 margin: 1em; 8 } 9 10 .ref { 11 display: flex; 12 overflow: scroll; 13 border: solid blue; 14 background: aqua; 15 margin: 0.5em; 16 float: left; 17 width: 80px; 18 height: 80px; 19 } 20 div { 21 flex: none; 22 } 23 24 .ref:first-child { 25 border-color: orange; 26 } 27 .ref > div { 28 border: 30px solid aqua; 29 width: 30px; 30 height: 30px; 31 background: teal; 32 } 33 </style> 34 35 <p>Test passes if all blue boxes in each row are identical to its first orange one, 36 including the size and position of the scrollbar. 37 38 <div class="set"> 39 <div class="ref"> 40 <div></div> 41 </div> 42 <div class="ref" style="flex-flow: row"> 43 <div></div> 44 </div> 45 <div class="ref" style="flex-flow: row wrap"> 46 <div></div> 47 </div> 48 <div class="ref" style="flex-flow: column"> 49 <div></div> 50 </div> 51 <div class="ref" style="flex-flow: column wrap"> 52 <div></div> 53 </div> 54 </div> 55 56 <div class="set"> 57 <div class="ref" style="flex-flow: row-reverse"> 58 <div></div> 59 </div> 60 <div class="ref" style="flex-flow: row-reverse"> 61 <div></div> 62 </div> 63 <div class="ref" style="flex-flow: row-reverse wrap"> 64 <div></div> 65 </div> 66 </div> 67 68 <div class="set"> 69 <div class="ref" style="flex-flow: column-reverse"> 70 <div></div> 71 </div> 72 <div class="ref" style="flex-flow: column-reverse"> 73 <div></div> 74 </div> 75 <div class="ref" style="flex-flow: column-reverse wrap"> 76 <div></div> 77 </div> 78 </div> 79 80 <div class="set"> 81 <div class="ref" style="flex-flow: row wrap-reverse"> 82 <div></div> 83 </div> 84 <div class="ref" style="flex-flow: row wrap-reverse"> 85 <div></div> 86 </div> 87 <div class="ref" style="flex-flow: column-reverse wrap"> 88 <div></div> 89 </div> 90 </div> 91 92 <div class="set"> 93 <div class="ref" style="flex-flow: row-reverse wrap-reverse"> 94 <div></div> 95 </div> 96 <div class="ref" style="flex-flow: row-reverse wrap-reverse"> 97 <div></div> 98 </div> 99 <div class="ref" style="flex-flow: column-reverse wrap-reverse"> 100 <div></div> 101 </div> 102 </div>