fit-content-item-001.html (1244B)
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="help" href="https://drafts.csswg.org/css-flexbox/#algo-cross-item"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <meta name="assert" content="A column flex container shrink wraps items both when determining their flex base sizes and when laying them out after their flexed size has been determined." /> 7 8 <style> 9 10 x-flexbox { 11 display: flex; 12 flex-direction: column; 13 } 14 15 x-item { 16 display: block; 17 background: red; 18 /* Override default alignment of "stretch" because items don't shrink to fit 19 when they are stretched. */ 20 align-self: start; 21 } 22 23 #mainSizeDependsOnCrossSize { 24 padding-bottom: 50%; 25 background: green; 26 } 27 28 #widthSetter { 29 width: 100px; 30 height: 50px; 31 background: green; 32 } 33 34 </style> 35 36 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 37 38 <x-flexbox> 39 <x-item> <!-- If fit-content is skipped when determining flex base size, this item gets a main size of 50px + 100vw / 2. --> 40 <div id=widthSetter></div> 41 <div id=mainSizeDependsOnCrossSize></div> 42 </x-item> 43 </x-flexbox>