flexbox-flex-basis-content-004b.html (3729B)
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> 9 CSS Test: Testing that used "flex-basis: content" is treated as 10 "max-content" when calculating flex base size 11 </title> 12 <meta charset="utf-8"> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 14 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> 15 <link rel="match" href="flexbox-flex-basis-content-004-ref.html"> 16 <style> 17 .container { 18 display: flex; 19 flex-direction: column; 20 align-items: flex-start; 21 /* flex container has an extremely-constrained height (and items will 22 overflow vertically). This is intentional, as part of stress-testing 23 item sizing. We add a large margin-bottom so that overflowing 24 items don't overlap between examples. */ 25 height: 1px; 26 margin-bottom: 49px; 27 } 28 29 .item { 30 /* We give all flex items a used "flex-basis" of "content" 31 (from "flex-basis:auto" and default "width:auto"). 32 We also give them zero flex-grow, flex-shrink, and min-main-size, so 33 that the flex base size entirely determines the flex item's size. */ 34 flex: 0 0 auto; 35 min-height: 0; 36 border: 2px solid teal; 37 } 38 ib { 39 display: inline-block; 40 background: blue; 41 border: 1px solid gray; 42 width: 15px; 43 height: 10px; 44 } 45 float { 46 float: left; 47 background: fuchsia; 48 border: 1px solid gray; 49 width: 15px; 50 height: 10px; 51 } 52 canvas { 53 background: brown; 54 border: 1px solid gray; 55 } 56 .innerFlex { 57 display: flex; 58 flex-direction: column; 59 } 60 innerItem { 61 background: salmon; 62 border: 1px solid gray; 63 height: 10px; 64 width: 15px; 65 flex: none; 66 } 67 </style> 68 </head> 69 <body> 70 <!-- This test exists for symmetry with the previous set of tests 71 (flexbox-flex-basis-content-003*). Those previous tests check how 72 "flex-basis:content" is resolved to a flex base size, in the inline axis, 73 when the container's size is constrained in that axis. This test does the 74 same, but for the *block* axis, using flex-direction:column. As with the 75 previous set of tests, the expectation here is that we should use the 76 item's max-content size as its flex base size. Note that there's a bit 77 less subtlety here because intrinsic sizes (min-content, max-content) are 78 typically all the same in the block axis. 79 --> 80 81 <!-- Flex item has several inline-blocks 82 (no spaces, to avoid any text-layout dependency): --> 83 <div class="container"> 84 <div class="item"><ib></ib><ib></ib><ib></ib></div> 85 </div> 86 87 <!-- Flex item has several floats: --> 88 <div class="container"> 89 <div class="item"> 90 <float></float> 91 <float></float> 92 <float></float> 93 </div> 94 </div> 95 96 <!-- Flex item has several inline replaced elements: 97 (no spaces, to avoid any text-layout dependency): --> 98 <div class="container"> 99 <div class="item"> 100 <canvas width="15" height="10"></canvas 101 ><canvas width="15" height="10"></canvas 102 ><canvas width="15" height="10"></canvas> 103 </div> 104 </div> 105 106 <!-- Flex item *is* a replaced element: --> 107 <div class="container"> 108 <canvas class="item" width="25" height="10"></canvas> 109 </div> 110 111 <!-- Flex item is itself a flex container: --> 112 <div class="container"> 113 <div class="item innerFlex"> 114 <innerItem></innerItem> 115 <innerItem></innerItem> 116 <innerItem></innerItem> 117 </div> 118 </div> 119 120 <!-- Flex item is itself a multi-line flex container: --> 121 <div class="container"> 122 <div class="item innerFlex" style="flex-wrap: wrap"> 123 <innerItem></innerItem> 124 <innerItem></innerItem> 125 <innerItem></innerItem> 126 </div> 127 </div> 128 129 </body> 130 </html>