flexbox-flex-wrap-flexing.html (1309B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>CSS Flexbox Test: flex-wrap flexes widths after line breaking</title> 5 <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> 6 <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 7 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-lines"> 8 <link rel="match" href="flexbox-flex-wrap-flexing-ref.html"/> 9 <meta name="assert" content="Flex items given more space after line breaking should flex wider"> 10 <meta name="assert" content="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> 11 <meta name="assert" content="http://www.w3.org/TR/css-flexbox-1/#flex-property"> 12 <style> 13 .container { 14 display: flex; 15 width: 150px; 16 height: 100px; 17 flex-wrap: wrap; 18 background: red; 19 } 20 .item { 21 min-width: 100px; 22 flex: 1; 23 height: 50px; 24 display: inline-block; /*to fail the test if display:flex fails*/; 25 background: green; 26 } 27 </style> 28 </head> 29 <body> 30 <p>Test passes if there is a green rectangle and no red.</p> 31 <div class="container"> 32 <div class="item"></div> 33 <div class="item"></div> 34 </div> 35 </body> 36 </html>