flexbox-sizing-horiz-001.xhtml (2811B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This testcase checks how "min-width" and "max-width" affect the sizing 8 of horizontal flex containers that have no explicit "width" property. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints</title> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 14 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> 15 <link rel="match" href="flexbox-sizing-horiz-001-ref.xhtml"/> 16 <style> 17 div { height: 10px; } 18 div.flexbox { 19 border: 1px dashed blue; 20 font-size: 10px; 21 display: flex; 22 margin-bottom: 2px; 23 } 24 div.a { 25 flex: 1 20px; 26 max-width: 60px; 27 background: lightgreen; 28 } 29 div.b { 30 flex: 1 20px; 31 min-width: 40px; 32 max-width: 60px; 33 background: purple; 34 } 35 div.c { 36 flex: 1 40px; 37 min-width: 10px; 38 max-width: 60px; 39 background: orange; 40 } 41 </style> 42 </head> 43 <body> 44 <!-- auto-sized horizontal flexbox should occupy the available width. --> 45 <div class="flexbox"> 46 <div class="a"/><div class="b"/><div class="c"/> 47 </div> 48 49 <!-- Adding a small min-size shouldn't affect that. --> 50 <div class="flexbox" style="min-width: 10px"> 51 <div class="a"/><div class="b"/><div class="c"/> 52 </div> 53 54 <!-- ...but a (large) max-size will limit us to that size, instead of 55 our available size.--> 56 <div class="flexbox" style="max-width: 300px"> 57 <div class="a"/><div class="b"/><div class="c"/> 58 </div> 59 60 <!-- If we set a maximum size that's even smaller, it'll limit our 61 size and compress our children. --> 62 <div class="flexbox" style="max-width: 70px"> 63 <div class="a"/><div class="b"/><div class="c"/> 64 </div> 65 66 <!-- The max-size may be small enough that our items will overflow. --> 67 <div class="flexbox" style="max-width: 20px"> 68 <div class="a"/><div class="b"/><div class="c"/> 69 </div> 70 71 <!-- But if we add a min-size, it beats the max-size. Here, we use a 72 min-size smaller than the sum of the items' base sizes... --> 73 <div class="flexbox" style="min-width: 58px; max-width: 20px"> 74 <div class="a"/><div class="b"/><div class="c"/> 75 </div> 76 77 <!-- ...and here we use a min-size larger than the sum of the items' 78 base sizes. --> 79 <div class="flexbox" style="min-width: 140px; max-width: 20px"> 80 <div class="a"/><div class="b"/><div class="c"/> 81 </div> 82 83 </body> 84 </html>