calc-size-flex-008.html (756B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> 3 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 4 <p>Test passes if there is a filled green square and <strong>no red</strong>. 5 <style> 6 #flex { 7 display: flex; 8 flex-direction: column; 9 flex-wrap: wrap; 10 11 width: 100px; 12 height: calc-size(auto, min(size, 100px)); 13 background: red; 14 } 15 16 #flex > div { 17 width: 100px; 18 height: 60px; 19 background: green; 20 } 21 </style> 22 <!-- There should only be one flex-line as at the time of determining the 23 available main-size it is indefinite, and calc-size() shouldn't resolve. 24 See: https://drafts.csswg.org/css-flexbox-1/#algo-available --> 25 <div id="flex"> 26 <div></div> 27 <div></div> 28 </div>