flexbox_align-items-stretch-4.html (1073B)
1 <!DOCTYPE html> 2 <title>Auto cross margins and align-items: stretch</title> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <meta name="assert" content="Auto cross margins prevent an item from stretching." /> 7 <link rel="bookmark" href="https://crbug.com/1015475" /> 8 <style> 9 x-flexbox { 10 display: flex; 11 /* This makes auto margins prevent stretching without affecting position. Without 12 it the auto margins make the item move to the center of the window. */ 13 width: 100px; 14 } 15 16 .item-with-auto-margin { 17 background: green; 18 margin: auto; 19 } 20 21 .pct-height-child { 22 height: 100%; 23 width: 100px; 24 background: red; 25 } 26 27 .second-child { 28 height: 100px; 29 } 30 </style> 31 32 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 33 34 <x-flexbox> 35 <div class=item-with-auto-margin> 36 <div class="pct-height-child"></div> 37 <div class="second-child"></div> 38 </div> 39 </x-flexbox>