flex-sizing-rows-indefinite-height-002.html (1642B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Expand flexible tracks with a fractional size</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-flex-tracks"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-find-fr-size"> 8 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 9 10 <style> 11 .grid { 12 display: grid; 13 width: 100px; 14 background: red; 15 } 16 .item { 17 grid-row: 2 / span 1; 18 background: green; 19 width: 100px; 20 height: 100px; 21 position: relative; 22 top: -32px; /* To move this item up to cover the first row */ 23 } 24 </style> 25 26 <!-- 27 Flexible row track sizes are resolved in two passes: 28 29 The first pass: 30 - The only grid item has a max-content height of 100px, which is also the 31 hypothetical fr size. 32 - Initially, each flexible track (0.4fr) is given a hypothetical size of 33 100px * 0.4 = 40px. 34 - This makes the grid container's height 40px * 2 = 80px in this pass. 35 36 The second pass: 37 - With the grid container's height now became fixed at 80px, the available 38 grid space is known. 39 - Per https://drafts.csswg.org/css-grid-2/#algo-find-fr-size 40 the hypothetical fr size is 80px * max(0.4 * 2 , 1.0) = 80px. 41 - In this pass, each 0.4fr row track resolves to 80px * 0.4 = 32px in height. 42 --> 43 44 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 45 <div class="grid" style="grid-template-rows: repeat(2, minmax(0,0.4fr))"> 46 <span class="item"></span> 47 </div>