flexbox-flex-wrap-horiz-002.html (1612B)
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: Ensure that min-width is honored for horizontal multi-line flex containers</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/#flex-wrap-property"> 11 <link rel="match" href="flexbox-flex-wrap-horiz-002-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 div.flexbox { 15 display: flex; 16 flex-wrap: wrap; 17 border: 1px dashed black; 18 min-width: 100px; 19 height: 12px; 20 float: left; 21 clear: both; 22 margin-bottom: 2px; 23 } 24 div.smallItem { 25 width: 30px; 26 border: 1px solid blue; 27 background: lightblue; 28 } 29 </style> 30 </head> 31 <body> 32 33 <!-- No flex items --> 34 <div class="flexbox"> 35 </div> 36 37 <!-- Single small flex item --> 38 <div class="flexbox"> 39 <div class="smallItem"></div> 40 </div> 41 42 <!-- Multiple flex items, larger than flex container's min-size: --> 43 <div class="flexbox"> 44 <div class="smallItem"></div> 45 <div class="smallItem"></div> 46 <div class="smallItem"></div> 47 <div class="smallItem"></div> 48 <div class="smallItem"></div> 49 </div> 50 51 <!--- ...and now with flex container constrained by both min and max-size --> 52 <div class="flexbox" style="max-width: 120px"> 53 <div class="smallItem"></div> 54 <div class="smallItem"></div> 55 <div class="smallItem"></div> 56 <div class="smallItem"></div> 57 <div class="smallItem"></div> 58 </div> 59 60 </body> 61 </html>