align-items-baseline-column-vert-rl-flexbox-item.html (1134B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> 4 <link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <style> 9 #target { 10 font-size: 16px; 11 line-height: 16px; 12 display: flex; 13 flex-direction: column; 14 width: 200px; 15 align-items: baseline; 16 border: 3px solid black; 17 font-family: monospace; 18 font-size: 10px; 19 line-height: 10px; 20 } 21 #target > :nth-child(1) { 22 background: hotpink; 23 writing-mode: vertical-rl; 24 padding-left: 30px; 25 margin-left: 10px; 26 } 27 #target > :nth-child(2) { 28 background: papayawhip; 29 writing-mode: vertical-rl; 30 } 31 .inner { 32 display: flex; 33 border: 5px solid black; 34 padding: 5px; 35 } 36 </style> 37 <body onload="checkLayout('#target > div')"> 38 <div id="target"> 39 <div class="inner" data-offset-x="146"> 40 <div>two<br>lines</div> 41 </div> 42 <div data-offset-x="191">hello</div> 43 </div> 44 </body>