grid-container-as-flex-item-002.html (1203B)
1 <!DOCTYPE html> 2 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 3 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1966450"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <meta name="assert" content="Tests that the inner grid container as a flex item is getting a reflow against its final size."> 8 9 <style> 10 .inner-grid { 11 display: grid; 12 flex: 1 1 0%; 13 width: 100%; 14 min-height: 0; /* Disable automatic minimum size in the main axis */ 15 background: red; 16 } 17 18 .inner-grid-item { 19 font: 50px/1 Ahem; 20 /* Disable automatic minimum size in inline axis. This is essential to 21 reproduce this bug. 'min-width:auto' doesn't reproduce. */ 22 min-width: 0; 23 width: 100%; 24 color: transparent; 25 background: green; 26 } 27 </style> 28 29 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 30 <div style="display: grid"> 31 <div style="display: flex; flex-direction: column; width: 100px"> 32 <div class="inner-grid"> 33 <div class="inner-grid-item">XX XX</div> 34 </div> 35 </div> 36 </div>