flexbox-flex-wrap-default.htm (1105B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox Test: Flex-wrap defaults to nowrap</title> 5 <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.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-wrap-property"> 8 <link rel="match" href="reference/flexbox-flex-wrap-nowrap-ref.htm" /> 9 <meta name="assert" content="Test checks that flex elements default to flex-wrap: nowrap if flex-wrap is not set. With wrapping disabled, the .green flex item should extend outside the bounds of its container, as it is set to flex:none."> 10 <style> 11 .flex-wrapper { 12 display: flex; 13 14 background: green; 15 border-right: 60px solid red; 16 17 width: 60px; 18 height: 120px; 19 } 20 21 .flex-wrapper div{ 22 width: 60px; 23 flex: none; 24 } 25 26 .green { 27 background: green; 28 } 29 </style> 30 </head> 31 <body> 32 <p>The test passes if there is a green square and no red.</p> 33 <div class="flex-wrapper"> 34 <div></div> 35 <div class="green"></div> 36 </div> 37 </body> 38 </html>