<!DOCTYPE html> <title>CSS Flexible Box Test: Aspect ratio handling of images</title> <link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" /> <link rel="help" href="https://github.com/web-platform-tests/wpt/issues/31609" /> <link rel="match" href="reference/flexbox-min-width-auto-006-ref.html" /> <style> .constrained-width-flex { width: 100px; display: flex; border: 1px solid black; } .constrained-height-flex { display: flex; height: 100px; } </style> <p>Test passes if there are two 100x100 green squares.</p> <div class="constrained-width-flex"> <div class="constrained-height-flex"> <img src="data:image/svg+xml, <svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'> <rect width='100%' height='100%' fill='green'/> </svg>"/> </div> </div> <br> <div class="constrained-width-flex"> <div class="constrained-height-flex"> <img src="support/60x60-green.png"/> </div> </div>