flex-factor-less-than-one.html (5570B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: flex factors less than one</title> 3 <link href="support/flexbox.css" rel="stylesheet"> 4 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow"> 5 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink"> 6 <meta name="assert" content="flex-grow and flex-shrink factors less than 1 work"> 7 <style> 8 9 html, body { 10 margin: 0; 11 padding: 0; 12 } 13 14 .container { 15 height: 100px; 16 width: 100px; 17 border: 1px solid black; 18 } 19 20 .child-flex-grow-0-75 { 21 background-color: lime; 22 flex-grow: 0.75; 23 } 24 25 .child-flex-grow-0-5 { 26 background-color: green; 27 flex-grow: 0.5; 28 } 29 30 .child-flex-grow-0-25 { 31 background-color: red; 32 flex-grow: 0.25; 33 } 34 35 .child-flex-shrink-0-5 { 36 background-color: green; 37 flex-shrink: 0.5; 38 width: 200px; 39 height: 200px; 40 } 41 42 .child-flex-shrink-0-25 { 43 background-color: red; 44 flex-shrink: 0.25; 45 width: 200px; 46 height: 200px; 47 } 48 49 .basis-0 { 50 flex-basis: 0; 51 } 52 53 .basis { 54 flex-basis: 30px; 55 } 56 57 .basis-big { 58 flex-basis: 100px; 59 } 60 61 .vertical { 62 writing-mode: vertical-rl; 63 } 64 </style> 65 <script src="/resources/testharness.js"></script> 66 <script src="/resources/testharnessreport.js"></script> 67 <script src="/resources/check-layout-th.js"></script> 68 <body onload="checkLayout('.flexbox');"> 69 <div id=log></div> 70 71 <div class="flexbox container"> 72 <div class="child-flex-grow-0-5" data-expected-width="50"></div> 73 </div> 74 75 <div class="flexbox container"> 76 <div class="child-flex-grow-0-5" data-expected-width="50"></div> 77 <div class="child-flex-grow-0-25" data-expected-width="25"></div> 78 </div> 79 80 <div class="flexbox container column"> 81 <div class="child-flex-grow-0-5" data-expected-height="50"></div> 82 <div class="child-flex-grow-0-25" data-expected-height="25"></div> 83 </div> 84 85 <div class="flexbox container column vertical"> 86 <div class="child-flex-grow-0-5 " data-expected-width="50"></div> 87 <div class="child-flex-grow-0-25 " data-expected-width="25"></div> 88 </div> 89 90 <div class="flexbox container vertical"> 91 <div class="child-flex-grow-0-5 " data-expected-height="50"></div> 92 <div class="child-flex-grow-0-25 " data-expected-height="25"></div> 93 </div> 94 95 <div class="flexbox container"> 96 <div class="child-flex-grow-0-5 basis" data-expected-width="50"></div> 97 <div class="child-flex-grow-0-25 basis" data-expected-width="40"></div> 98 </div> 99 100 <div class="flexbox container column"> 101 <div class="child-flex-grow-0-5 basis" data-expected-height="50"></div> 102 <div class="child-flex-grow-0-25 basis" data-expected-height="40"></div> 103 </div> 104 105 <div class="flexbox container vertical"> 106 <div class="child-flex-grow-0-5 basis" data-expected-height="50"></div> 107 <div class="child-flex-grow-0-25 basis" data-expected-height="40"></div> 108 </div> 109 110 <div class="flexbox container column vertical"> 111 <div class="child-flex-grow-0-5 basis" data-expected-width="50"></div> 112 <div class="child-flex-grow-0-25 basis" data-expected-width="40"></div> 113 </div> 114 115 <!-- And now, the shrink cases --> 116 <div class="flexbox container"> 117 <div class="child-flex-shrink-0-5" data-expected-width="150"></div> 118 </div> 119 120 <div class="flexbox container"> 121 <div class="child-flex-shrink-0-5" data-expected-width="50"></div> 122 <div class="child-flex-shrink-0-25" data-expected-width="125"></div> 123 </div> 124 125 <div class="flexbox container column"> 126 <div class="child-flex-shrink-0-5" data-expected-height="50"></div> 127 <div class="child-flex-shrink-0-25" data-expected-height="125"></div> 128 </div> 129 130 <div class="flexbox container column vertical"> 131 <div class="child-flex-shrink-0-5 " data-expected-width="50"></div> 132 <div class="child-flex-shrink-0-25 " data-expected-width="125"></div> 133 </div> 134 135 <div class="flexbox container vertical"> 136 <div class="child-flex-shrink-0-5 " data-expected-height="50"></div> 137 <div class="child-flex-shrink-0-25 " data-expected-height="125"></div> 138 </div> 139 140 <div class="flexbox container"> 141 <div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div> 142 <div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div> 143 </div> 144 <div class="flexbox container column"> 145 <div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div> 146 <div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div> 147 </div> 148 149 <div class="flexbox container vertical"> 150 <div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div> 151 <div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div> 152 </div> 153 154 <div class="flexbox container column vertical"> 155 <div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div> 156 <div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div> 157 </div> 158 159 <!-- Interaction of min-width: auto with fractional flex basis --> 160 <div class="flexbox container" style="background-color: red;"> 161 <div class="child-flex-grow-0-25 basis-0" style="background-color: green;" data-expected-width="10"></div> 162 <div class="child-flex-grow-0-75 basis-0" data-expected-width="90"> 163 <div style="width: 90px;"></div> 164 </div> 165 </div> 166 167 <!-- centering should still center; same for other justify-content values --> 168 <div class="flexbox container justify-content-center"> 169 <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div> 170 </div> 171 172 <div class="flexbox container justify-content-space-around"> 173 <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div> 174 </div> 175 176 <div class="flexbox container justify-content-flex-end"> 177 <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="51"></div> 178 </div> 179 180 </body>