flexbox-align-self-stretch-vert-002.html (1119B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing the sizing of stretched flex items in a vertical multi-line flex container</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> 11 <link rel="match" href="flexbox-align-self-stretch-vert-002-ref.html"> 12 <meta name="assert" content="In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed."> 13 <meta charset="utf-8"> 14 <style> 15 div.container { 16 display: flex; 17 flex-flow: column wrap; 18 width: 100px; 19 height: 20px; 20 border: 2px solid black; 21 } 22 div.item { 23 /* Tall enough to force wrapping (since parent height is 20px): */ 24 min-height: 15px; 25 border: 1px dotted blue; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="container"> 31 <div class="item"></div> 32 <div class="item"></div> 33 </div> 34 </body> 35 </html>