flex-container-max-content-001.html (9631B)
1 <!DOCTYPE html> 2 <title>Flex Container Max-Content Main Sizing: Flex Item Max-Content Contributions</title> 3 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions"> 4 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item"> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 6 <link rel="match" href="flex-container-max-content-001-ref.html"> 7 8 <style> 9 @import "/fonts/ahem.css"; /* optional */ 10 11 body { 12 /* Fit it in 800x600 pixels */ 13 display: grid; 14 grid-template-columns: repeat(auto-fill, 66px 66px 66px); 15 grid-auto-rows: 50px; 16 font: 10px/1 Ahem, monospace; 17 } 18 19 /* impose min-content constraint, block formatting context */ 20 .wrap > * { 21 width: max-content; 22 height: max-content; 23 /* floating inside a large box for UAs that don't understand min-content */ 24 float: left; 25 } 26 .wrap { 27 width: 100px; height: 100px; 28 counter-increment: test; 29 } 30 31 .row, .col { 32 display: flex; 33 background: blue; 34 } 35 .row { flex-flow: row; } 36 .col { flex-flow: column; } 37 38 .item { 39 /* ensure _outer_ size is measured */ 40 margin: 5px; 41 padding: 3px; 42 border: 2px solid aqua; 43 color: orange; 44 } 45 46 47 /* help people debugging */ 48 .wrap:hover::before { 49 content: counter(test, decimal-leading-zero); 50 position: absolute; 51 font: initial; 52 } 53 </style> 54 55 <!-- 56 57 { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } 58 59 --> 60 61 <!-- 01 row x flexible x none x harmonious --> 62 <div class="wrap"> 63 <div class="row"> 64 <div class="item" style="flex: auto">X X</div> 65 </div> 66 </div> 67 68 <!-- 02 row x flexible x small x harmonious --> 69 <div class="wrap"> 70 <div class="row"> 71 <div class="item" style="flex: auto; width: 0.4ch">X X</div> 72 </div> 73 </div> 74 75 <!-- 03 row x flexible x large x harmonious --> 76 <div class="wrap"> 77 <div class="row"> 78 <div class="item" style="flex: auto; width: 4ch">X X</div> 79 </div> 80 </div> 81 82 83 <!-- 04 row x flexible x none x disjoint --> 84 <div class="wrap"> 85 <div class="row"> 86 <div class="item" style="flex: 6ch">X X</div> 87 </div> 88 </div> 89 90 <!-- 05 row x flexible x small x disjoint --> 91 <div class="wrap"> 92 <div class="row"> 93 <div class="item" style="flex: 6ch; width: 0.4ch">X X</div> 94 </div> 95 </div> 96 97 <!-- 06 row x flexible x large x disjoint --> 98 <div class="wrap"> 99 <div class="row"> 100 <div class="item" style="flex: 6ch; width: 4ch">X X</div> 101 </div> 102 </div> 103 104 105 106 <!-- 07 row x no-grow x none x harmonious --> 107 <div class="wrap"> 108 <div class="row"> 109 <div class="item" style="flex: 0 1 auto">X X</div> 110 </div> 111 </div> 112 113 <!-- 08 row x no-grow x small x harmonious --> 114 <div class="wrap"> 115 <div class="row"> 116 <div class="item" style="flex: 0 1 auto; width: 0.4ch">X X</div> 117 </div> 118 </div> 119 120 <!-- 09 row x no-grow x large x harmonious --> 121 <div class="wrap"> 122 <div class="row"> 123 <div class="item" style="flex: 0 1 auto; width: 4ch">X X</div> 124 </div> 125 </div> 126 127 128 <!-- 10 row x no-grow x none x larger --> 129 <div class="wrap"> 130 <div class="row"> 131 <div class="item" style="flex: 0 1 6ch">X X</div> 132 </div> 133 </div> 134 135 <!-- 11 row x no-grow x small x larger --> 136 <div class="wrap"> 137 <div class="row"> 138 <div class="item" style="flex: 0 1 6ch; width: 0.4ch">X X</div> 139 </div> 140 </div> 141 142 <!-- 12 row x no-grow x large x larger --> 143 <div class="wrap"> 144 <div class="row"> 145 <div class="item" style="flex: 0 1 6ch; width: 4ch">X X</div> 146 </div> 147 </div> 148 149 150 <!-- 13 row x no-grow x none x smaller --> 151 <div class="wrap"> 152 <div class="row"> 153 <div class="item" style="flex: 0 1 0.2ch">X X</div> 154 </div> 155 </div> 156 157 <!-- 14 row x no-grow x smaller x smaller --> 158 <div class="wrap"> 159 <div class="row"> 160 <div class="item" style="flex: 0 1 0.2ch; width: 0.4ch">X X</div> 161 </div> 162 </div> 163 164 <!-- 15 row x no-grow x larger x smaller --> 165 <div class="wrap"> 166 <div class="row"> 167 <div class="item" style="flex: 0 1 0.2ch; width: 4ch">X X</div> 168 </div> 169 </div> 170 171 172 173 <!-- 16 row x no-shrink x none x harmonious --> 174 <div class="wrap"> 175 <div class="row"> 176 <div class="item" style="flex: 1 0 auto">X X</div> 177 <!-- see also https://www.w3.org/TR/css-flexbox-1/#algo-main-item case C --> 178 </div> 179 </div> 180 181 <!-- 17 row x no-shrink x small x harmonious --> 182 <div class="wrap"> 183 <div class="row"> 184 <div class="item" style="flex: 1 0 auto; width: 0.4ch">X X</div> 185 </div> 186 </div> 187 188 <!-- 18 row x no-shrink x large x harmonious --> 189 <div class="wrap"> 190 <div class="row"> 191 <div class="item" style="flex: 1 0 auto; width: 4ch">X X</div> 192 </div> 193 </div> 194 195 196 <!-- 19 row x no-shrink x none x larger --> 197 <div class="wrap"> 198 <div class="row"> 199 <div class="item" style="flex: 1 0 4.5ch">X X</div> 200 </div> 201 </div> 202 203 <!-- 20 row x no-shrink x small x larger --> 204 <div class="wrap"> 205 <div class="row"> 206 <div class="item" style="flex: 1 0 4.5ch; width: 0.4ch">X X</div> 207 </div> 208 </div> 209 210 <!-- 21 row x no-shrink x large x larger --> 211 <div class="wrap"> 212 <div class="row"> 213 <div class="item" style="flex: 1 0 4.5ch; width: 4ch">X X</div> 214 </div> 215 </div> 216 217 218 <!-- 22 row x no-shrink x none x smaller --> 219 <div class="wrap"> 220 <div class="row"> 221 <div class="item" style="flex: 1 0 0.2ch">X X</div> 222 </div> 223 </div> 224 225 <!-- 23 row x no-shrink x smaller x smaller --> 226 <div class="wrap"> 227 <div class="row"> 228 <div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div> 229 </div> 230 </div> 231 232 <!-- 24 row x no-shrink x larger x smaller --> 233 <div class="wrap"> 234 <div class="row"> 235 <div class="item" style="flex: 1 0 0.2ch; width: 4ch">X X</div> 236 </div> 237 </div> 238 239 240 <!-- ###################################################################### --> 241 242 243 <!-- 01 col x flexible x none x harmonious --> 244 <div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> 245 <div class="col"> 246 <div class="item" style="flex: auto">X</div> 247 </div> 248 </div> 249 250 <!-- 02 col x flexible x small x harmonious --> 251 <div class="wrap"> 252 <div class="col"> 253 <div class="item" style="flex: auto; height: 0.4em">X</div> 254 </div> 255 </div> 256 257 <!-- 03 col x flexible x large x harmonious --> 258 <div class="wrap"> 259 <div class="col"> 260 <div class="item" style="flex: auto; height: 1.5em">X</div> 261 </div> 262 </div> 263 264 265 <!-- 04 col x flexible x none x disjoint --> 266 <div class="wrap"> 267 <div class="col"> 268 <div class="item" style="flex: 2em">X</div> 269 </div> 270 </div> 271 272 <!-- 05 col x flexible x small x disjoint --> 273 <div class="wrap"> 274 <div class="col"> 275 <div class="item" style="flex: 2em; height: 0.4em">X</div> 276 </div> 277 </div> 278 279 <!-- 06 col x flexible x large x disjoint --> 280 <div class="wrap"> 281 <div class="col"> 282 <div class="item" style="flex: 2em; height: 1.5em">X</div> 283 </div> 284 </div> 285 286 287 288 <!-- 07 col x no-grow x none x harmonious --> 289 <div class="wrap"> 290 <div class="col"> 291 <div class="item" style="flex: 0 1 auto">X</div> 292 </div> 293 </div> 294 295 <!-- 08 col x no-grow x small x harmonious --> 296 <div class="wrap"> 297 <div class="col"> 298 <div class="item" style="flex: 0 1 auto; height: 0.4em">X</div> 299 </div> 300 </div> 301 302 <!-- 09 col x no-grow x large x harmonious --> 303 <div class="wrap"> 304 <div class="col"> 305 <div class="item" style="flex: 0 1 auto; height: 1.5em">X</div> 306 </div> 307 </div> 308 309 310 <!-- 10 col x no-grow x none x larger --> 311 <div class="wrap"> 312 <div class="col"> 313 <div class="item" style="flex: 0 1 2em">X</div> 314 </div> 315 </div> 316 317 <!-- 11 col x no-grow x small x larger --> 318 <div class="wrap"> 319 <div class="col"> 320 <div class="item" style="flex: 0 1 2em; height: 0.4em">X</div> 321 </div> 322 </div> 323 324 <!-- 12 col x no-grow x large x larger --> 325 <div class="wrap"> 326 <div class="col"> 327 <div class="item" style="flex: 0 1 2em; height: 1.5em">X</div> 328 </div> 329 </div> 330 331 332 <!-- 13 col x no-grow x none x smaller --> 333 <div class="wrap"> 334 <div class="col"> 335 <div class="item" style="flex: 0 1 0.2em">X</div> 336 </div> 337 </div> 338 339 <!-- 14 col x no-grow x smaller x smaller --> 340 <div class="wrap"> 341 <div class="col"> 342 <div class="item" style="flex: 0 1 0.2em; height: 0.4em">X</div> 343 </div> 344 </div> 345 346 <!-- 15 col x no-grow x larger x smaller --> 347 <div class="wrap"> 348 <div class="col"> 349 <div class="item" style="flex: 0 1 0.2em; height: 1.5em">X</div> 350 </div> 351 </div> 352 353 354 355 356 357 <!-- 16 col x no-shrink x none x harmonious --> 358 <div class="wrap"> 359 <div class="col"> 360 <div class="item" style="flex: 1 0 auto">X</div> 361 </div> 362 </div> 363 364 <!-- 17 col x no-shrink x small x harmonious --> 365 <div class="wrap"> 366 <div class="col"> 367 <div class="item" style="flex: 1 0 auto; height: 0.4em">X</div> 368 </div> 369 </div> 370 371 <!-- 18 col x no-shrink x large x harmonious --> 372 <div class="wrap"> 373 <div class="col"> 374 <div class="item" style="flex: 1 0 auto; height: 1.5em">X</div> 375 </div> 376 </div> 377 378 379 <!-- 19 col x no-shrink x none x larger --> 380 <div class="wrap"> 381 <div class="col"> 382 <div class="item" style="flex: 1 0 0.2em">X</div> 383 </div> 384 </div> 385 386 <!-- 20 col x no-shrink x small x larger --> 387 <div class="wrap"> 388 <div class="col"> 389 <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> 390 </div> 391 </div> 392 393 <!-- 21 col x no-shrink x large x larger --> 394 <div class="wrap"> 395 <div class="col"> 396 <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> 397 </div> 398 </div> 399 400 401 <!-- 22 col x no-shrink x none x smaller --> 402 <div class="wrap"> 403 <div class="col"> 404 <div class="item" style="flex: 1 0 0.2em">X</div> 405 </div> 406 </div> 407 408 <!-- 23 col x no-shrink x smaller x smaller --> 409 <div class="wrap"> 410 <div class="col"> 411 <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> 412 </div> 413 </div> 414 415 <!-- 24 col x no-shrink x larger x smaller --> 416 <div class="wrap"> 417 <div class="col"> 418 <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> 419 </div> 420 </div>