flexbox_align-items-stretch-3.html (764B)
1 <!DOCTYPE html> 2 <title>flex base size and stretched items</title> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" title="bullet #1"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <meta name="assert" content="Item's stretched size is used for laying out descendants when determining flex base size." /> 7 <style> 8 x-flexbox { 9 display: flex; 10 height: 100px; 11 } 12 13 x-item { 14 background: green; 15 writing-mode: vertical-lr; 16 } 17 18 x-item > div { 19 padding-right: 70%; 20 width: 30px; 21 } 22 </style> 23 24 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 25 26 <x-flexbox> 27 <x-item> 28 <div></div> 29 </x-item> 30 </x-flexbox>