flex-minimum-height-flex-items-031.html (2211B)
1 <!DOCTYPE html> 2 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> 4 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=240068"> 5 <meta name="assert" content="An intrinsic min-height can make a column flex container grow enough for its contents, even if it's also a flex item with 'flex-basis: 0px'."> 6 7 <div id="log"></div> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/check-layout-th.js"></script> 12 <script> 13 for (let outerFlexDirection of ["column", "column-reverse"]) { 14 for (let innerFlexDirection of ["column", "column-reverse"]) { 15 for (let placeContent of ["start", "center", "end"]) { 16 for (let minHeight of ["auto", "min-content", "max-content"]) { 17 for (let flex of ["0 0 44px", "1 1 44px"]) { 18 const outer = document.createElement("div"); 19 outer.className = "flex"; 20 outer.style.display = "inline-flex"; 21 outer.style.flexDirection = outerFlexDirection; 22 outer.style.border = "1px solid #000"; 23 outer.dataset.expectedClientHeight = "104"; 24 25 const inner = document.createElement("div"); 26 inner.style.flexBasis = "0px"; 27 inner.style.display = "flex"; 28 inner.style.flexDirection = innerFlexDirection; 29 inner.style.placeContent = placeContent; 30 inner.style.minHeight = minHeight; 31 inner.style.border = "2px solid #0ff"; 32 inner.dataset.expectedClientHeight = "100"; 33 34 const content1 = document.createElement("div"); 35 content1.style.flex = flex; 36 content1.style.border = "3px solid #f0f"; 37 content1.dataset.expectedHeight = "50"; 38 39 const content2 = content1.cloneNode(); 40 41 content1.textContent = "1"; 42 content2.textContent = "2"; 43 inner.appendChild(content1); 44 inner.appendChild(content2); 45 outer.appendChild(inner); 46 document.body.appendChild(outer); 47 } 48 } 49 } 50 } 51 document.body.appendChild(document.createElement("br")); 52 } 53 checkLayout(".flex"); 54 </script>