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