flex-aspect-ratio-055.html (808B)
1 <!DOCTYPE html> 2 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> 5 <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> 6 <meta name="assert" content=" 7 The automatic minimum size makes the flex item be 50px wide (converted from the height through the aspect ratio). 8 Adding the borders, the flex container is then a 100x100 square."> 9 10 <style> 11 .flex { 12 display: inline-flex; 13 border: solid 25px green; 14 } 15 .flex img { 16 height: 50px; 17 flex: 0 0 0px; 18 aspect-ratio: 1 / 1; 19 } 20 </style> 21 <p>Test passes if there is a filled green square.</p> 22 <div class="flex"> 23 <img src="support/20x50-green.png"> 24 </div>