abspos-autopos-vlr-ltr.html (1109B)
1 <!DOCTYPE html> 2 <title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> 3 <link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> 5 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> 6 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 7 <style> 8 .flex { 9 display: flex; 10 position: relative; 11 writing-mode: vertical-lr; 12 direction: ltr; 13 width: 100px; 14 height: 100px; 15 border: solid white; 16 border-left-width: 20px; 17 left: -20px; 18 border-top-width: 5px; 19 top: -5px; 20 border-right-width: 10px; 21 border-bottom-width: 15px; 22 background: red; 23 } 24 .flex > div { 25 position: absolute; 26 width: 100%; 27 height: 100%; 28 background: green; 29 } 30 </style> 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div class="flex"> 33 <div></div> 34 </div>