flex-abspos-staticpos-align-self-safe-003.html (1343B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: 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 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 8 <link rel="match" href="flex-abspos-staticpos-align-self-safe-003-ref.html"> 9 <meta charset="utf-8"> 10 <style> 11 .flex { 12 display: flex; 13 height: 50px; 14 width: 50px; 15 border: 3px solid black; 16 vertical-align: top; 17 margin: 20px; 18 position: relative; 19 } 20 .child { 21 border: 2px dotted purple; 22 background: teal; 23 width: 25px; 24 height: 25px; 25 align-self: safe end; 26 position: absolute; 27 background: yellow; 28 } 29 .rowDir { 30 flex-direction: row; 31 } 32 .colDir { 33 flex-direction: column; 34 } 35 .vertRL { 36 writing-mode: vertical-rl; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="flex rowDir"><div class="child"></div></div> 42 <div class="flex colDir"><div class="child"></div></div> 43 <div class="flex rowDir vertRL"><div class="child"></div></div> 44 <div class="flex colDir vertRL"><div class="child"></div></div> 45 </body> 46 </html>