flex-abspos-staticpos-align-self-safe-003-ref.html (1182B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Reference: Testing safe overflow-position for align-self in absolutely positioned boxes in flex containers when item doesn't overflow</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: 25px; 22 height: 25px; 23 align-self: end; 24 position: absolute; 25 background: yellow; 26 } 27 .rowDir { 28 flex-direction: row; 29 } 30 .colDir { 31 flex-direction: column; 32 } 33 .vertRL { 34 writing-mode: vertical-rl; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="flex rowDir"><div class="child"></div></div> 40 <div class="flex colDir"><div class="child"></div></div> 41 <div class="flex rowDir vertRL"><div class="child"></div></div> 42 <div class="flex colDir vertRL"><div class="child"></div></div> 43 </body> 44 </html>