grid-container-as-flex-item-003.html (1263B)
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: none; /* Making inner grid container inflexible */ 13 width: 100%; 14 height: 100px; 15 min-height: 0; /* Disable automatic minimum size in the main axis */ 16 background: red; 17 } 18 19 .inner-grid-item { 20 font: 50px/1 Ahem; 21 /* Disable automatic minimum size in inline axis. This is essential to 22 reproduce this bug. 'min-width:auto' doesn't reproduce. */ 23 min-width: 0; 24 width: 100%; 25 color: transparent; 26 background: green; 27 } 28 </style> 29 30 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 31 <div style="display: grid"> 32 <div style="display: flex; flex-direction: column; width: 100px"> 33 <div class="inner-grid"> 34 <div class="inner-grid-item">XX XX</div> 35 </div> 36 </div> 37 </div>