flex-abspos-staticpos-align-self-safe-002.html (1377B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: 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 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 8 <link rel="match" href="flex-abspos-staticpos-align-self-safe-002-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: 65px; 24 height: 65px; 25 align-self: safe center; 26 position: absolute; 27 background: yellow; 28 margin: 5px; 29 } 30 .rowDir { 31 flex-direction: row-reverse; 32 } 33 .colDir { 34 flex-direction: column-reverse; 35 } 36 .vertRL { 37 writing-mode: vertical-rl; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="flex rowDir"><div class="child"></div></div> 43 <div class="flex colDir"><div class="child"></div></div> 44 <div class="flex rowDir vertRL"><div class="child"></div></div> 45 <div class="flex colDir vertRL"><div class="child"></div></div> 46 </body> 47 </html>