<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 specified 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 {

height: 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>