flex-minimum-height-flex-items-023.html (3017B)
1 <!DOCTYPE html> 2 <title>Flex minimum height of image with intrinsic min-height specified</title> 3 <link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" /> 6 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> 7 <link rel="bookmark" href="https://crbug.com/1088223"> 8 <meta name="assert" content="Flex uses automatic minimum sizes when item specifies min-height:intrinsic, because that is treated as auto."> 9 10 <p>Test passes if there is a filled green square.</p> 11 12 <!-- 13 Here's the spec trail why the height of this item is 100px. 14 15 1. The column flexbox has height:0, and the item has flex-shrink: 1. So 16 min-height will determine the item's flexed height. 17 18 2. The min-content value of the min-height property is equivalent to the 19 automatic size, per https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content, 20 because it's in the item's block dimension. (Blink legacy flex disagrees here) 21 22 3. Per https://drafts.csswg.org/css-flexbox/#min-size-auto, the used value of a 23 main axis automatic minimum size on a flex item that is not a scroll container 24 is a content-based minimum size. 25 26 4. The content-based min size of this item is min(content size suggestion, 27 specified size suggestion). We ignore transferred size suggestion because 28 this item has a specified size. 29 30 5. content size suggestion = 50px because the stretched width of 100px is sent 31 through the 2:1 aspect ratio to determine the image's min-content size in the 32 block axis. 33 34 5a. This flex container qualifies for 9.8.3: 35 36 If a single-line flex container has a definite cross size, the automatic 37 preferred outer cross size of any stretched flex items is the flex 38 container's inner cross size (clamped to the flex item's min and max cross 39 size) and is considered definite. 40 41 So the preferred width of the image is 100px. 42 5b. The float specified by the min-content calculation from css-sizing 5.1 is 43 <img src="support/300x150-green.png" style="width: 100px; float: left;" /> 44 This element gets height 50px. 45 46 6. specified size suggestion = 100px because that's what's specified. 47 48 7. So content-based min size = min(50, 100) = 50px. That becomes its flexed 49 height (see #1). 50 51 8. Then, the item stretches its width to 100px. The item has an aspect ratio, 52 so does the new width change the height? Not according to 53 https://drafts.csswg.org/css-flexbox/#algo-stretch, which says "Note that 54 this step does not affect the main size of the flex item, even if it has an 55 intrinsic aspect ratio." The height remains 50px. 56 --> 57 58 <div style="height: 50px; width: 100px; background: green;"></div> 59 <div style="display: flex; flex-direction: column; width:100px; height: 0px;"> 60 <img src="support/300x150-green.png" style="min-height: min-content; height: 100px;" /> 61 </div>