flex-abspos-staticpos-align-self-safe-001-ref.html (1193B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0 5 --> 6 <html> 7 <head> 8 <title>Reference: Testing safe overflow-position for align-self in absolutely positioned boxes in flex containers</title> 9 <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> 10 <meta charset="utf-8"> 11 <style> 12 .flex { 13 display: flex; 14 height: 50px; 15 width: 50px; 16 border: 3px solid black; 17 vertical-align: top; 18 margin: 20px; 19 position: relative; 20 } 21 .child { 22 border: 2px dotted purple; 23 background: teal; 24 width: 65px; 25 height: 65px; 26 align-self: start; 27 position: absolute; 28 background: yellow; 29 } 30 .rowDir { 31 flex-direction: row; 32 } 33 .colDir { 34 flex-direction: column; 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>