stretched-child-in-nested-flexbox-003.html (921B)
1 <!DOCTYPE html> 2 <title>css-flexbox: stretching of flex item in nested flexbox</title> 3 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 4 <link rel="help" href="https://github.com/servo/servo/issues/38023"> 5 <link rel="match" href="/css/reference/ref-filled-green-200px-square.html"> 6 <meta name="assert" content="Due to min-height, the outer flex container is 200px tall. 7 It's single-line, so its flex item stretched to that size, and is considered definite. 8 Therefore, the percentage in the nested flex container resolves as 200px. 9 And thus its flex item is also stretched to be 200px tall. 10 "> 11 12 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 13 <div style="display: flex; min-height: 200px"> 14 <div> 15 <div style="display: flex; height: 100%; background-color: red"> 16 <div style="width: 200px; background-color: green;"></div> 17 </div> 18 </div> 19 </div>