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