fit-content-item-003.html (1309B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 5 <meta name="assert" content="A flex container's block cross size of max-content is treated as indefinite when setting fit-content on an item for flex base sizing"> 6 7 <style> 8 x-flexbox { 9 display: flex; 10 height: max-content; 11 } 12 13 .fit-content-item { 14 background: green; 15 width: 100px; 16 writing-mode: vertical-lr; 17 } 18 19 .height-setting-item { 20 height: 100px; 21 } 22 23 </style> 24 25 <!-- This has to be a row flexbox whose item stretches and has vertical writing 26 mode to trigger: 27 * a cross size is needed to determine the main size (row flexbox's cross size 28 is vertical, which is the item's inline size because it has a vertical 29 writing mode) 30 * the flex item’s cross size is [...] not definite (if the item didn't 31 stretch, the definiteness of the container's cross size wouldn't matter 32 because the cross size would never be definite and the item would always get 33 fit-content) 34 --> 35 36 <p>Test passes if there is a filled green square.</p> 37 38 <x-flexbox> 39 <div class="fit-content-item"></div> 40 <div class="height-setting-item"></div> 41 </x-flexbox>