flex-abspos-staticpos-align-self-safe-002-ref.html (1215B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Reference: Testing safe overflow-position for align-self in absolutely positioned boxes in reverse flex containers w/ item margin</title> 5 <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> 6 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 7 <meta charset="utf-8"> 8 <style> 9 .flex { 10 display: flex; 11 height: 50px; 12 width: 50px; 13 border: 3px solid black; 14 vertical-align: top; 15 margin: 20px; 16 position: relative; 17 } 18 .child { 19 border: 2px dotted purple; 20 background: teal; 21 width: 65px; 22 height: 65px; 23 align-self: start; 24 position: absolute; 25 background: yellow; 26 margin: 5px; 27 } 28 .rowDir { 29 flex-direction: row-reverse; 30 } 31 .colDir { 32 flex-direction: column-reverse; 33 } 34 .vertRL { 35 writing-mode: vertical-rl; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="flex rowDir"><div class="child"></div></div> 41 <div class="flex colDir"><div class="child"></div></div> 42 <div class="flex rowDir vertRL"><div class="child"></div></div> 43 <div class="flex colDir vertRL"><div class="child"></div></div> 44 </body> 45 </html>