flex-line-001.html (1486B)
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"> 9 <style> 10 .container { 11 /* inline just so they don't overflow on each other */ 12 display: inline-flex; 13 width: 100px; 14 height: 100px; 15 border: solid; 16 flex-wrap: wrap; 17 /* Prevent the lines from stretching. */ 18 align-content: start; 19 font: 20px/1 Ahem; 20 } 21 22 .container > div { 23 border: 3px solid; 24 } 25 26 .stretch { 27 width: -moz-available; 28 width: -webkit-fill-available; 29 width: stretch; 30 } 31 </style> 32 33 <div class="container"> 34 <div class="stretch" style="width: 75px; border-color: cyan" 35 data-expected-height="26">a</div> 36 <div class="stretch" style="width: 75px; border-color: magenta" 37 data-expected-height="26">b</div> 38 </div> 39 <div class="container"> 40 <div class="stretch" style="width: 75px; border-color: cyan" 41 data-expected-height="156">a</div> 42 <div style="border-color: orange; height: 150px"></div> 43 <div class="stretch" style="width: 75px; border-color: magenta" 44 data-expected-height="26">b</div> 45 </div> 46 47 <script> 48 document.fonts.ready.then(() => checkLayout(".stretch")); 49 </script>