flexbox-auto-minimum-002.html (940B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Automatic minimum size of flex item with stretch cross size</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> 7 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 8 <meta assert="A definite `stretch` cross size can be transferred through the 9 aspect ratio when computing the automatic minimum size of a flex item."> 10 11 <style> 12 div { 13 display: flex; 14 flex-direction: row; 15 height: 200px; 16 width: 200px; 17 background: red; 18 } 19 canvas { 20 height: stretch; 21 align-self: start; 22 flex-basis: 0; 23 background: green; 24 } 25 </style> 26 27 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 28 <div class="flex"> 29 <canvas width="100" height="100"></canvas> 30 </div>