indefinite-4.html (1123B)
1 <!DOCTYPE html> 2 <link rel="help" 3 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11006"> 5 <script src='/resources/testharness.js'></script> 6 <script src='/resources/testharnessreport.js'></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <meta name="assert" 9 content="with indefinite available space, flex-item's min-height:stretch in the main axis resolves as 0, and does not invoke automatic minimum sizing"> 10 11 <body 12 onload="checkLayout('[data-expected-client-height]')"> 13 14 <p>If indefinite <code>min-height: stretch</code> behaves as automatic size 15 then black border will encompass lorem ipsum due to flex automatic minimum 16 sizing.</p> 17 18 <p>If indefinite <code>min-height: stretch</code> behaves as 0px 19 then black border will not encompass lorem ipsum.</p> 20 21 <div 22 style="display: flex; flex-direction: column; border: solid cyan; min-height: 100px; width: 200px;"> 23 <div style="min-height: stretch; flex-basis: 0; border: solid" 24 data-expected-client-height="0">lorem ipsum 25 </div> 26 </div>