overflow-top-left.html (986B)
1 <!DOCTYPE html> 2 <head> 3 <title>cross-axis top and left overflow</title> 4 <link rel="author" title="Google, Inc." href="http://www.google.com/"> 5 <link rel="match" href="overflow-top-left-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing"> 7 </head> 8 9 <style> 10 .row-wrapper, .column-wrapper { 11 margin: 4px 0; 12 overflow: auto; 13 display: flex; 14 direction: rtl; 15 border: 2px solid black; 16 } 17 18 .column-wrapper { 19 width: 300px; 20 display: flex; 21 flex-direction: column; 22 } 23 24 .row-wrapper { 25 height: 300px; 26 flex-direction: column; 27 writing-mode: vertical-rl; 28 } 29 30 .column-wrapper > div { 31 margin: 4px; 32 height: 30px; 33 background: #CCC; 34 } 35 36 .h-overflow { 37 width: 500px; 38 } 39 40 .row-wrapper > div { 41 margin: 4px; 42 width: 30px; 43 background: #CCC; 44 } 45 46 .v-overflow { 47 height: 500px; 48 } 49 </style> 50 51 <div class=column-wrapper> 52 <div>one</div> 53 <div class=h-overflow>two</div> 54 </div> 55 56 <div class=row-wrapper> 57 <div>one</div> 58 <div class=v-overflow>two</div> 59 </div>