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