align-content-block-overflow-000.html (8316B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Box Alignment: align-content + overflow:hidden on small block container with floats</title> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 6 <link rel="match" href="align-content-block-overflow-000-ref.html"> 7 8 <style title="Needed for automation; delete to review/debug"> 9 @import "/fonts/ahem.css"; 10 html { font: 10px/1 Ahem; max-width: 800px; } 11 .label { display: none; } 12 </style> 13 14 <style> 15 html, body { margin: 0; padding: 0; } 16 17 .test { height: 1.8em; margin: 0.5em 2em; overflow: hidden; 18 /* show bounds of test box without interfering with margin-collapsing */ 19 background: black; padding-right: 2px; } 20 /* ensure float is contained */ 21 .float { float: right; background: orange; height: 2em } 22 /* ensure margin is contained */ 23 .in-flow { margin-top: 1em; background: orange } 24 /* ensure relpos is ignored */ 25 .relpos { position: relative; top: -1.5em; } 26 /* ensure abspos static position follows alignment */ 27 .wrapper { position: relative; } 28 .abspos { position: absolute; right: 0; margin-top: -1.5em; } 29 /* ensure overflow is not counted */ 30 .overflow { height: 0; } 31 32 /* cram into 800x600 */ 33 html { max-height: 600px; columns: 3 } 34 .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } 35 36 /* readability */ 37 .test > * { color: #8888; } 38 .label { color: black; font-weight: bold; } 39 </style> 40 41 <div class="wrapper"> 42 <div class="test" style="align-content: start"> 43 <div class="float">FLT</div> 44 <div class="in-flow"></div> 45 <div class="in-flow"> 46 <div class="float">FLT</div> 47 <span class="label">START</span> 48 <span class="abspos">ABS</span> 49 <span class="relpos">REL</span> 50 <div class="overflow">OVERFLOW</div> 51 </div> 52 </div> 53 </div> 54 <div class="wrapper"> 55 <div class="test" style="align-content: center"> 56 <div class="float">FLT</div> 57 <div class="in-flow"></div> 58 <div class="in-flow"> 59 <div class="float">FLT</div> 60 <span class="label">CENTER</span> 61 <span class="abspos">ABS</span> 62 <span class="relpos">REL</span> 63 <div class="overflow">OVERFLOW</div> 64 </div> 65 </div> 66 </div> 67 <div class="wrapper"> 68 <div class="test" style="align-content: end"> 69 <div class="float">FLT</div> 70 <div class="in-flow"></div> 71 <div class="in-flow"> 72 <div class="float">FLT</div> 73 <span class="label">END</span> 74 <span class="abspos">ABS</span> 75 <span class="relpos">REL</span> 76 <div class="overflow">OVERFLOW</div> 77 </div> 78 </div> 79 </div> 80 <div class="wrapper"> 81 <div class="test" style="align-content: baseline"> 82 <div class="float">FLT</div> 83 <div class="in-flow"></div> 84 <div class="in-flow"> 85 <div class="float">FLT</div> 86 <span class="label">BASELINE</span> 87 <span class="abspos">ABS</span> 88 <span class="relpos">REL</span> 89 <div class="overflow">OVERFLOW</div> 90 </div> 91 </div> 92 </div> 93 <div class="wrapper"> 94 <div class="test" style="align-content: last baseline"> 95 <div class="float">FLT</div> 96 <div class="in-flow"></div> 97 <div class="in-flow"> 98 <div class="float">FLT</div> 99 <span class="label">LAST BASELINE</span> 100 <span class="abspos">ABS</span> 101 <span class="relpos">REL</span> 102 <div class="overflow">OVERFLOW</div> 103 </div> 104 </div> 105 </div> 106 <div class="wrapper"> 107 <div class="test" style="align-content: flex-start"> 108 <div class="float">FLT</div> 109 <div class="in-flow"></div> 110 <div class="in-flow"> 111 <div class="float">FLT</div> 112 <span class="label">FLEX-START</span> 113 <span class="abspos">ABS</span> 114 <span class="relpos">REL</span> 115 <div class="overflow">OVERFLOW</div> 116 </div> 117 </div> 118 </div> 119 <div class="wrapper"> 120 <div class="test" style="align-content: flex-end"> 121 <div class="float">FLT</div> 122 <div class="in-flow"></div> 123 <div class="in-flow"> 124 <div class="float">FLT</div> 125 <span class="label">FLEX-END</span> 126 <span class="abspos">ABS</span> 127 <span class="relpos">REL</span> 128 <div class="overflow">OVERFLOW</div> 129 </div> 130 </div> 131 </div> 132 <div class="wrapper"> 133 <div class="test" style="align-content: unsafe start"> 134 <div class="float">FLT</div> 135 <div class="in-flow"></div> 136 <div class="in-flow"> 137 <div class="float">FLT</div> 138 <span class="label">UNSAFE START</span> 139 <span class="abspos">ABS</span> 140 <span class="relpos">REL</span> 141 <div class="overflow">OVERFLOW</div> 142 </div> 143 </div> 144 </div> 145 <div class="wrapper"> 146 <div class="test" style="align-content: unsafe center"> 147 <div class="float">FLT</div> 148 <div class="in-flow"></div> 149 <div class="in-flow"> 150 <div class="float">FLT</div> 151 <span class="label">UNSAFE CENTER</span> 152 <span class="abspos">ABS</span> 153 <span class="relpos">REL</span> 154 <div class="overflow">OVERFLOW</div> 155 </div> 156 </div> 157 </div> 158 <div class="wrapper"> 159 <div class="test" style="align-content: unsafe end"> 160 <div class="float">FLT</div> 161 <div class="in-flow"></div> 162 <div class="in-flow"> 163 <div class="float">FLT</div> 164 <span class="label">UNSAFE END</span> 165 <span class="abspos">ABS</span> 166 <span class="relpos">REL</span> 167 <div class="overflow">OVERFLOW</div> 168 </div> 169 </div> 170 </div> 171 <div class="wrapper"> 172 <div class="test" style="align-content: safe start"> 173 <div class="float">FLT</div> 174 <div class="in-flow"></div> 175 <div class="in-flow"> 176 <div class="float">FLT</div> 177 <span class="label">SAFE START</span> 178 <span class="abspos">ABS</span> 179 <span class="relpos">REL</span> 180 <div class="overflow">OVERFLOW</div> 181 </div> 182 </div> 183 </div> 184 <div class="wrapper"> 185 <div class="test" style="align-content: safe center"> 186 <div class="float">FLT</div> 187 <div class="in-flow"></div> 188 <div class="in-flow"> 189 <div class="float">FLT</div> 190 <span class="label">SAFE CENTER</span> 191 <span class="abspos">ABS</span> 192 <span class="relpos">REL</span> 193 <div class="overflow">OVERFLOW</div> 194 </div> 195 </div> 196 </div> 197 <div class="wrapper"> 198 <div class="test" style="align-content: safe end"> 199 <div class="float">FLT</div> 200 <div class="in-flow"></div> 201 <div class="in-flow"> 202 <div class="float">FLT</div> 203 <span class="label">SAFE END</span> 204 <span class="abspos">ABS</span> 205 <span class="relpos">REL</span> 206 <div class="overflow">OVERFLOW</div> 207 </div> 208 </div> 209 </div> 210 <div class="wrapper"> 211 <div class="test" style="align-content: space-evenly"> 212 <div class="float">FLT</div> 213 <div class="in-flow"></div> 214 <div class="in-flow"> 215 <div class="float">FLT</div> 216 <span class="label">SPACE-EVENLY</span> 217 <span class="abspos">ABS</span> 218 <span class="relpos">REL</span> 219 <div class="overflow">OVERFLOW</div> 220 </div> 221 </div> 222 </div> 223 <div class="wrapper"> 224 <div class="test" style="align-content: space-between"> 225 <div class="float">FLT</div> 226 <div class="in-flow"></div> 227 <div class="in-flow"> 228 <div class="float">FLT</div> 229 <span class="label">SPACE-BETWEEN</span> 230 <span class="abspos">ABS</span> 231 <span class="relpos">REL</span> 232 <div class="overflow">OVERFLOW</div> 233 </div> 234 </div> 235 </div> 236 <div class="wrapper"> 237 <div class="test" style="align-content: space-around"> 238 <div class="float">FLT</div> 239 <div class="in-flow"></div> 240 <div class="in-flow"> 241 <div class="float">FLT</div> 242 <span class="label">SPACE-AROUND</span> 243 <span class="abspos">ABS</span> 244 <span class="relpos">REL</span> 245 <div class="overflow">OVERFLOW</div> 246 </div> 247 </div> 248 </div> 249 <div class="wrapper"> 250 <div class="test" style="align-content: normal"> 251 <div class="float">FLT</div> 252 <div class="in-flow"></div> 253 <div class="in-flow"> 254 <div class="float">FLT</div> 255 <span class="label">NORMAL</span> 256 <span class="abspos">ABS</span> 257 <span class="relpos">REL</span> 258 <div class="overflow">OVERFLOW</div> 259 </div> 260 </div> 261 </div> 262 263 <p> 264 <button onclick="document.querySelector('style[title]').textContent = 'html { font: 10px/1 sans-serif; }'">Show Text</button>