flexbox-flex-wrap-nowrap.htm (1121B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox Test: Flex-wrap = 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 set to flex-wrap: nowrap will not wrap their flex items. 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 flex-wrap: nowrap; 14 15 background: green; 16 border-right: 60px solid red; 17 18 width: 60px; 19 height: 120px; 20 } 21 22 .flex-wrapper div{ 23 width: 60px; 24 flex: none; 25 } 26 27 .green { 28 background: green; 29 } 30 </style> 31 </head> 32 <body> 33 <p>The test passes if there is a green square and no red.</p> 34 <div class="flex-wrapper"> 35 <div></div> 36 <div class="green"></div> 37 </div> 38 </body> 39 </html>