Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox: shrink-to-fit item in multi-line column container</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<meta assert="
#item has `align-self: start`, which sizes it as `fit-content`.
Therefore, we initially shrink-to-fit it into the container (100px),
thus getting a cross size of 100px and a main size of 200px.
However, we have another item which is 200px wide, so the flex line
grows to that size.
Once we know the final cross size of the line, we shrink-to-fit #item
into the line (200px), thus getting a final cross size of 200px.
Now both floats fit side by side into these 200px, so vertically they
only need 100px, but the main size of #item remains as 200px.
">
<style>
#container {
display: flex;
flex-flow: column wrap;
width: 100px;
border-right: 100px solid red;
}
#item{
align-self: start;
background: linear-gradient(to bottom, red 50%, green 50%);
}
.float {
float: left;
width: 100px;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="item">
<div class="float"></div>
<div class="float"></div>
</div>
<div style="width: 200px"></div>
</div>