flexbox-flex-basis-content-004a.html (3668B)
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 explicit "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 "flex-basis: content". 31 We also give them zero flex-grow, flex-shrink, and min-main-size, so 32 that the flex base size entirely determines the flex item's size. */ 33 flex: 0 0 content; 34 min-height: 0; 35 border: 2px solid teal; 36 } 37 ib { 38 display: inline-block; 39 background: blue; 40 border: 1px solid gray; 41 width: 15px; 42 height: 10px; 43 } 44 float { 45 float: left; 46 background: fuchsia; 47 border: 1px solid gray; 48 width: 15px; 49 height: 10px; 50 } 51 canvas { 52 background: brown; 53 border: 1px solid gray; 54 } 55 .innerFlex { 56 display: flex; 57 flex-direction: column; 58 } 59 innerItem { 60 background: salmon; 61 border: 1px solid gray; 62 height: 10px; 63 width: 15px; 64 flex: none; 65 } 66 </style> 67 </head> 68 <body> 69 <!-- This test exists for symmetry with the previous set of tests 70 (flexbox-flex-basis-content-003*). Those previous tests check how 71 "flex-basis:content" is resolved to a flex base size, in the inline axis, 72 when the container's size is constrained in that axis. This test does the 73 same, but for the *block* axis, using flex-direction:column. As with the 74 previous set of tests, the expectation here is that we should use the 75 item's max-content size as its flex base size. Note that there's a bit 76 less subtlety here because intrinsic sizes (min-content, max-content) are 77 typically all the same in the block axis. 78 --> 79 80 <!-- Flex item has several inline-blocks 81 (no spaces, to avoid any text-layout dependency): --> 82 <div class="container"> 83 <div class="item"><ib></ib><ib></ib><ib></ib></div> 84 </div> 85 86 <!-- Flex item has several floats: --> 87 <div class="container"> 88 <div class="item"> 89 <float></float> 90 <float></float> 91 <float></float> 92 </div> 93 </div> 94 95 <!-- Flex item has several inline replaced elements: 96 (no spaces, to avoid any text-layout dependency): --> 97 <div class="container"> 98 <div class="item"> 99 <canvas width="15" height="10"></canvas 100 ><canvas width="15" height="10"></canvas 101 ><canvas width="15" height="10"></canvas> 102 </div> 103 </div> 104 105 <!-- Flex item *is* a replaced element: --> 106 <div class="container"> 107 <canvas class="item" width="25" height="10"></canvas> 108 </div> 109 110 <!-- Flex item is itself a flex container: --> 111 <div class="container"> 112 <div class="item innerFlex"> 113 <innerItem></innerItem> 114 <innerItem></innerItem> 115 <innerItem></innerItem> 116 </div> 117 </div> 118 119 <!-- Flex item is itself a multi-line flex container: --> 120 <div class="container"> 121 <div class="item innerFlex" style="flex-wrap: wrap"> 122 <innerItem></innerItem> 123 <innerItem></innerItem> 124 <innerItem></innerItem> 125 </div> 126 </div> 127 128 </body> 129 </html>