flex-line-002.html (1501B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11784"> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <script src="/resources/check-layout-th.js"></script> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <meta name="assert" 8 content="An item's cross-size:stretch should stretch to the line size, not the container size; container has indefinite height"> 9 <style> 10 .container { 11 /* inline just so they don't overflow on each other */ 12 display: inline-flex; 13 width: 100px; 14 border: solid; 15 flex-wrap: wrap; 16 /* Prevent the lines from stretching. */ 17 align-content: start; 18 font: 20px/1 Ahem; 19 } 20 21 .container>div { 22 border: 3px solid; 23 } 24 25 .stretch { 26 height: -moz-available; 27 height: -webkit-fill-available; 28 height: stretch; 29 } 30 </style> 31 32 <div class="container"> 33 <div class="stretch" style="width: 75px; border-color: cyan" 34 data-expected-height="26">a</div> 35 <div class="stretch" style="width: 75px; border-color: magenta" 36 data-expected-height="26">b</div> 37 </div> 38 <div class="container"> 39 <div class="stretch" style="width: 75px; border-color: cyan" 40 data-expected-height="156">a</div> 41 <div style="border-color: orange; height: 150px"></div> 42 <div class="stretch" style="width: 75px; border-color: magenta" 43 data-expected-height="26">b</div> 44 </div> 45 46 <script> 47 document.fonts.ready.then(() => checkLayout(".stretch")); 48 </script>