| <!DOCTYPE html> |
| <head> |
| <title>cross-axis top and left overflow</title> |
| <link rel="author" title="Google, Inc." href="http://www.google.com/"> |
| <link rel="match" href="overflow-top-left-ref.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing"> |
| </head> |
| |
| <style> |
| .row-wrapper, .column-wrapper { |
| margin: 4px 0; |
| overflow: auto; |
| display: flex; |
| direction: rtl; |
| border: 2px solid black; |
| } |
| |
| .column-wrapper { |
| width: 300px; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .row-wrapper { |
| height: 300px; |
| flex-direction: column; |
| writing-mode: vertical-rl; |
| } |
| |
| .column-wrapper > div { |
| margin: 4px; |
| height: 30px; |
| background: #CCC; |
| } |
| |
| .h-overflow { |
| width: 500px; |
| } |
| |
| .row-wrapper > div { |
| margin: 4px; |
| width: 30px; |
| background: #CCC; |
| } |
| |
| .v-overflow { |
| height: 500px; |
| } |
| </style> |
| |
| <div class=column-wrapper> |
| <div>one</div> |
| <div class=h-overflow>two</div> |
| </div> |
| |
| <div class=row-wrapper> |
| <div>one</div> |
| <div class=v-overflow>two</div> |
| </div> |