|
| 1 | +<!DOCTYPE html> |
| 2 | +<meta charset="utf-8"> |
| 3 | +<title>CSS Flexbox: shrink-to-fit item in multi-line column container</title> |
| 4 | +<link rel=" author" title=" Oriol Brufau" href=" mailto:[email protected]" > |
| 5 | +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> |
| 6 | +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11784"> |
| 7 | +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> |
| 8 | +<meta assert=" |
| 9 | + #item has `align-self: start`, which sizes it as `fit-content`. |
| 10 | + Therefore, we initially shrink-to-fit it into the container (100px), |
| 11 | + thus getting a cross size of 100px and a main size of 200px. |
| 12 | + However, we have another item which is 200px wide, so the flex line |
| 13 | + grows to that size. |
| 14 | + Once we know the final cross size of the line, we shrink-to-fit #item |
| 15 | + into the line (200px), thus getting a final cross size of 200px. |
| 16 | + Now both floats fit side by side into these 200px, so vertically they |
| 17 | + only need 100px, but the main size of #item remains as 200px. |
| 18 | +"> |
| 19 | + |
| 20 | +<style> |
| 21 | +#container { |
| 22 | + display: flex; |
| 23 | + flex-flow: column wrap; |
| 24 | + width: 100px; |
| 25 | + border-right: 100px solid red; |
| 26 | +} |
| 27 | +#item{ |
| 28 | + align-self: start; |
| 29 | + background: linear-gradient(to bottom, red 50%, green 50%); |
| 30 | +} |
| 31 | +.float { |
| 32 | + float: left; |
| 33 | + width: 100px; |
| 34 | + height: 100px; |
| 35 | + background: green; |
| 36 | +} |
| 37 | +</style> |
| 38 | + |
| 39 | +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> |
| 40 | +<div id="container"> |
| 41 | + <div id="item"> |
| 42 | + <div class="float"></div> |
| 43 | + <div class="float"></div> |
| 44 | + </div> |
| 45 | + <div style="width: 200px"></div> |
| 46 | +</div> |
0 commit comments