<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Flexible Box Test: Minimum height of flex items</title> <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> <meta name="assert" content="Checks that minimum height for flex items is the transferred size, as the min-content size of the image corresponds to that." /> <style type="text/css"><![CDATA[ #reference-overlapped-red { position: absolute; background-color: red; width: 100px; height: 100px; z-index: -1; } #constrained-flex { display: flex; flex-direction: column; width: 100px; height: 10px; } #test-flex-item-overlapping-green { width: 100px; } ]]></style> </head> <body> <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> <div id="reference-overlapped-red"></div> <div id="constrained-flex"> <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> </div> </body> </html>