├── .github └── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md └── docs ├── 1.1.a-bug.html ├── 1.1.b-workaround.html ├── 1.2.a-bug.html ├── 1.2.b-workaround.html ├── 10.1.a-bug.html ├── 10.1.b-workaround.html ├── 11.1.a-bug.html ├── 11.1.b-workaround.html ├── 12.1.a-bug.html ├── 12.1.b-workaround.html ├── 13.1.a-bug.html ├── 13.1.b-workaround.html ├── 14.1.a-bug.html ├── 14.1.b-workaround.html ├── 14.1.c-workaround.html ├── 15.1.a-bug.html ├── 15.1.b-workaround.html ├── 16.1.a-bug.html ├── 16.1.b-workaround.html ├── 17.1.a-bug.html ├── 17.1.b-workaround.html ├── 2.1.a-bug.html ├── 2.1.b-workaround.html ├── 3.1.a-bug.html ├── 3.1.b-workaround.html ├── 3.2.a-bug.html ├── 3.2.b-workaround.html ├── 4.1.a-bug.html ├── 4.1.b-workaround.html ├── 5.1.a-bug.html ├── 5.1.b-workaround.html ├── 6.1.a-bug.html ├── 6.1.b-workaround.html ├── 6.2.a-bug.html ├── 6.2.b-workaround.html ├── 7.1.a-bug.html ├── 7.1.b-workaround.html ├── 7.1.c-workaround.html ├── 8.1.a-bug.html ├── 8.1.b-workaround.html ├── 8.2.a-bug.html ├── 8.2.b-workaround.html ├── 9.1.a-bug.html ├── 9.1.b-workaround.html ├── 9.2.a-bug.html ├── 9.2.b-workaround.html ├── 9.3.a-bug.html ├── README.md └── _config.yml /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Important! Please read before opening an issue: 2 | 3 | - This repo **is not** for reporting Flexbox bugs in browsers. Please report those directly to the browsers themselves. Here's a link to all major browser bug trackers: https://developers.google.com/web/feedback/#reporting-bugs 4 | 5 | - This repo **is not** for asking Flexbox quesions, please use Stack Overflow for that. 6 | 7 | - This repo **is** for reporting cross-browser workarounds to already-reported Flexbox bugs. Please only open an issue if you know of a good, cross-browser workaround and the bug has already been reported to all affected browsers. 8 | 9 | ### Things to include in your issue: 10 | 11 | - Please include links to the bugs for each affected browser's bug tracker. 12 | 13 | - Please include a live demo ([CodePen](https://codepen.io/) or [JSBin](https://jsbin.com)) showing both the issue and the workaround. 14 | 15 | - Please clearly explain exactly what the expected behavior is and what's not happening in the affected browser(s). It's not always immediately obvious from looking at a demo what is wrong. 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Philip Walton 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: _**UPDATE:** this repo is no longer maintained, as most of the bugs listed here are fixed in modern browsers._ 2 | 3 | Flexbugs 4 | ======== 5 | 6 | This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here. 7 | 8 | As the spec continues to evolve and vendors nail down their implementations, this repo will be updated with newly discovered issues and remove old issues as they're fixed or become obsolete. If you discover a bug that's not listed here, please [report it](#contributing) so everyone else can benefit. 9 | 10 | ## The bugs and their workarounds 11 | 12 | 1. [Minimum content sizing of flex items not honored](#flexbug-1) 13 | 2. [Column flex items set to `align-items: center` overflow their container](#flexbug-2) 14 | 3. [`min-height` on a flex container won't apply to its flex items](#flexbug-3) 15 | 4. [`flex` shorthand declarations with unitless `flex-basis` values are ignored](#flexbug-4) 16 | 5. [Column flex items don't always preserve intrinsic aspect ratios](#flexbug-5) 17 | 6. [The default `flex` value has changed](#flexbug-6) 18 | 7. [`flex-basis` doesn't account for `box-sizing: border-box`](#flexbug-7) 19 | 8. [`flex-basis` doesn't support `calc()`](#flexbug-8) 20 | 9. [Some HTML elements can't be flex containers](#flexbug-9) 21 | 10. [`align-items: baseline` doesn't work with nested flex containers](#flexbug-10) 22 | 11. [Min and max size declarations are ignored when wrapping flex items](#flexbug-11) 23 | 12. [Inline elements are not treated as flex-items](#flexbug-12) 24 | 13. [Importance is ignored on flex-basis when using flex shorthand](#flexbug-13) 25 | 14. [Shrink-to-fit containers with `flex-flow: column wrap` do not contain their items](#flexbug-14) 26 | 15. [Column flex items ignore `margin: auto` on the cross axis](#flexbug-15) 27 | 16. [`flex-basis` cannot be animated](#flexbug-16) 28 | 17. [Flex items are not correctly justified when `max-width` is used](#flexbug-17) 29 | 30 | 31 | 32 | 33 | 34 | ### Flexbug #1 35 | 36 | _Minimum content sizing of flex items not honored_ 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 51 | 56 | 61 | 62 |
DemosBrowsers affectedTracking bugs
46 | 1.1.a – bug
47 | 1.1.b – workaround
48 | 1.2.a – bug
49 | 1.2.b – workaround 50 | 		52 | Chrome (fixed in 72)
53 | Opera (fixed in 60)
54 | Safari (fixed in 10) 55 | 		57 | Chrome #426898 (fixed)
58 | Chrome #596743 (fixed)
59 | Safari #146020 (fixed) 60 |
63 | 64 | When flex items are too big to fit inside their container, those items are instructed (by the flex layout algorithm) to shrink, proportionally, according to their `flex-shrink` property. But contrary to what most browsers allow, they're *not* supposed to shrink indefinitely. They must always be at least as big as their minimum height or width properties declare, and if no minimum height or width properties are set, their minimum size should be the default minimum size of their content. 65 | 66 | According to the [current flexbox specification](http://www.w3.org/TR/css-flexbox/#flex-common): 67 | 68 | > By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. 69 | 70 | #### Workaround 71 | 72 | The flexbox spec defines an initial `flex-shrink` value of `1` but says items should not shrink below their default minimum content size. You can usually get this same behavior by setting a `flex-shrink` value of `0` (instead of the default `1`) and a `flex-basis` value of `auto`. That will cause the flex item to be at least as big as its width or height (if declared) or its default content size. 73 | 74 | 75 | 76 | 77 | 78 | ### Flexbug #2 79 | 80 | _Column flex items set to `align-items: center` overflow their container_ 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 92 | 95 | 96 |
DemosBrowsers affected
89 | 2.1.a – bug
90 | 2.1.b – workaround 91 | 		93 | Internet Explorer 10-11 (fixed in Edge) 94 |
97 | 98 | When using `align-items: center` on a flex container in the column direction, the contents of flex item, if too big, will overflow their container in IE 10-11. 99 | 100 | #### Workaround 101 | 102 | Most of the time, this can be fixed by simply setting `max-width: 100%` on the flex item. If the flex item has a padding or border set, you'll also need to make sure to use `box-sizing: border-box` to account for that space. If the flex item has a margin, using `box-sizing` alone will not work, so you may need to use a container element with padding instead. 103 | 104 | 105 | 106 | 107 | 108 | ### Flexbug #3 109 | 110 | _`min-height` on a flex container won't apply to its flex items_ 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 125 | 126 | 127 | 128 |
DemosBrowsers affectedTracking bugs
120 | 3.1.a – bug
121 | 3.1.b – workaround
122 | 3.2.a – bug
123 | 3.2.b – workaround 124 | 		Internet Explorer 10-11 (fixed in Edge)IE #802625 (archived)
129 | 130 | In order for flex items to size and position themselves, they need to know how big their containers are. For example, if a flex item is supposed to be vertically centered, it needs to know how tall its parent is. The same is true when flex items are told to grow to fill the remaining empty space. 131 | 132 | In IE 10-11, `min-height` declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all. 133 | 134 | #### Workaround 135 | 136 | By far the most common element to apply `min-height` to is the body element, and usually you're setting it to `100%` (or `100vh`). Since the body element will never have any content below it, and since having a vertical scroll bar appear when there's a lot of content on the page is usually the desired behavior, substituting `height` for `min-height` will almost always work as shown in demo [3.1.b](https://philipwalton.github.io/flexbugs/3.1.b-workaround.html). 137 | 138 | For cases where `min-height` is required, the workaround is to add a wrapper element around the flex container that is itself a flex container in the column direction. For some reason nested flex containers are not affected by this bug. Demo [3.2.a](https://philipwalton.github.io/flexbugs/3.2.a-bug.html) shows a visual design where `min-height` is required, and demo [3.2.b](https://philipwalton.github.io/flexbugs/3.2.b-workaround.html) shows how this bug can be avoided with a wrapper element. 139 | 140 | 141 | 142 | 143 | 144 | ### Flexbug #4 145 | 146 | _`flex` shorthand declarations with unitless `flex-basis` values are ignored_ 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 158 | 159 | 160 |
DemosBrowsers affected
155 | 4.1.a – bug
156 | 4.1.b – workaround 157 | 		Internet Explorer 10-11 (fixed in Edge)
161 | 162 | Prior to the release of IE 10, the [flexbox spec at the time](http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flexibility) stated that a flexbox item's preferred size required a unit when using the `flex` shorthand: 163 | 164 | > If the <preferred-size> is ‘0’, it must be specified with a unit (like ‘0px’) to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error. 165 | 166 | This is no longer true in the spec, but IE 10-11 still treat it as true. If you use the declaration `flex: 1 0 0` in one of these browsers, it will be an error and the entire rule (including all the flexibility properties) will be ignored. 167 | 168 | #### Workaround 169 | 170 | When using the `flex` shorthand, always include a unit in the `flex-basis` portion. For example: `1 0 0%`. 171 | 172 | **Important:** using a `flex` value of something like `1 0 0px` can still be a problem because many CSS minifiers will convert `0px` to `0`. To avoid this, make sure to use `0%` instead of `0px` since most minifiers won't touch percentage values for other reasons. 173 | 174 | 175 | 176 | 177 | 178 | ### Flexbug #5 179 | 180 | _Column flex items don't always preserve intrinsic aspect ratios_ 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 192 | 193 | 194 |
DemosBrowsers affected
189 | 5.1.a – bug
190 | 5.1.b – workaround 191 | 		Internet Explorer 10-11 (fixed in Edge)
195 | 196 | The [March 2014 spec](http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#min-size-auto) has the following to say about how size determinations are made for flex items: 197 | 198 | > On a flex item whose overflow is not visible, this [auto] keyword specifies as the minimum size the smaller of: (a) the min-content size, or (b) the computed width/height, if that value is definite. 199 | 200 | Demo [5.1.a](https://philipwalton.github.io/flexbugs/5.1.a-bug.html) contains an image whose height is 200 pixels and whose width is 500 pixels. Its container, however, is only 300 pixels wide, so after the image is scaled to fit into that space, its computed height should only be 120 pixels. The text quoted above does not make it clear as to whether the flex item's min-content size should be based the image's actual height or scaled height. 201 | 202 | The [most recent spec](http://dev.w3.org/csswg/css-flexbox/#min-size-auto) has resolved this ambiguity in favor of using sizes that will preserve an element's intrinsic aspect ratio. 203 | 204 | #### Workaround 205 | 206 | You can avoid this problem by adding a container element to house the element with the intrinsic aspect ratio. Since doing this causes the element with the intrinsic aspect ratio to no longer be a flex item, it will be sized normally. 207 | 208 | 209 | 210 | 211 | 212 | ### Flexbug #6 213 | 214 | _The default `flex` value has changed_ 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 228 | 229 | 230 |
DemosBrowsers affected
223 | 6.1.a – bug
224 | 6.1.b – workaround
225 | 6.2.a – bug
226 | 6.2.b – workaround 227 | 		Internet Explorer 10 (fixed in 11)
231 | 232 | When IE 10 was being developed, the [March 2012 spec](http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flexibility) said the initial value for the `flex` property was `none`, which translates to `0 0 auto`. The [most recent spec](http://www.w3.org/TR/css3-flexbox/#flex-property) sets the initial `flex` value to the initial values of the individual flexibility properties, which corresponds to `initial` or `0 1 auto`. Notice that this means IE 10 uses a different initial `flex-shrink` value (technically it was called `neg-flex` in the spec at the time) from every other browser. Other browsers (including IE 11) use an initial value of `1` rather than `0`. 233 | 234 | This bug can manifest itself in two ways: when not setting any flex values or when using one of the `flex` shorthands. In both cases, flex items in IE 10 will behave differently from all other browsers. The following table illustrates the difference: 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 |
DeclarationWhat it should meanWhat it means in IE 10
(no flex declaration)flex: 0 1 autoflex: 0 0 auto
flex: 1flex: 1 1 0%flex: 1 0 0px
flex: autoflex: 1 1 autoflex: 1 0 auto
flex: initialflex: 0 1 autoflex: 0 0 auto
263 | 264 | #### Workaround 265 | 266 | If you have to support IE 10, the best solution is to *always* set an explicit `flex-shrink` value on all of your flex items, or to always use the longhand form (rather than the shorthand) in `flex` declarations to avoid the gotchas shown in the table above. Demo [6.1.a](https://philipwalton.github.io/flexbugs/6.1.a-bug.html) shows how not setting any flexibility properties causes an error, and demo [6.2.a](https://philipwalton.github.io/flexbugs/6.2.a-bug.html) shows how using `flex: 1` can have the same problem. 267 | 268 | 269 | 270 | 271 | 272 | ### Flexbug #7 273 | 274 | _`flex-basis` doesn't account for `box-sizing: border-box`_ 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 287 | 288 | 289 |
DemosBrowsers affected
283 | 7.1.a – bug
284 | 7.1.b – workaround
285 | 7.1.c – workaround 286 | 		Internet Explorer 10-11 (fixed in Edge)
290 | 291 | An explicit `flex-basis` value (i.e., any value other than `auto`) is supposed to act just like `width` or `height`. It determines the initial size of a flex item and then the other flexibility properties allow it to grow or shrink accordingly. 292 | 293 | IE 10-11 always assume a content box model when using `flex-basis` to determine a flex item's size, even if that item is set to `box-sizing: border-box`. Demo [7.1.a](https://philipwalton.github.io/flexbugs/7.1.a-bug.html) shows that an item with a `flex-basis` value of `100%` will overflow its container by the amount of its border plus its padding. 294 | 295 | #### Workaround 296 | 297 | There are two ways to work around this bug. The first requires no additional markup, but the second is slightly more flexible: 298 | 299 | 1. Instead of setting an explicit `flex-basis` value, use `auto`, and then set an explicit width or height. Demo [7.1.b](https://philipwalton.github.io/flexbugs/7.1.b-workaround.html) shows this. 300 | 2. Use a wrapper element that contains no border or padding so it works with the content box model. Demo [7.1.c](https://philipwalton.github.io/flexbugs/7.1.c-workaround.html) show this. 301 | 302 | 303 | 304 | 305 | 306 | ### Flexbug #8 307 | 308 | _`flex-basis` doesn't support `calc()`_ 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 320 | 321 | 322 | 323 | 327 | 328 | 329 |
DemosBrowsers affected
317 | 8.1.a – bug
318 | 8.1.b – workaround 319 | 		Internet Explorer 10-11 (fixed in Edge)
324 | 8.2.a – bug
325 | 8.2.b – workaround 326 | 		Internet Explorer 10 (fixed in 11)
330 | 331 | IE 10-11 ignore `calc()` functions used in `flex` shorthand declarations. Demo [8.1.a](https://philipwalton.github.io/flexbugs/8.1.a-bug.html) shows `flex: 0 0 calc(100%/3)` not working in IE. 332 | 333 | In IE 10, `calc()` functions don't even work in longhand `flex-basis` declarations (though this does work in IE 11). Demo [8.2.a](https://philipwalton.github.io/flexbugs/8.2.a-bug.html) shows `flex-basis: calc(100%/3)` not working in IE 10. 334 | 335 | #### Workaround 336 | 337 | Since this bug only affects the `flex` shorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually. Demo [8.1.b](https://philipwalton.github.io/flexbugs/8.1.b-workaround.html) offers an example of this. 338 | 339 | If you need to support IE 10 as well, then you'll need to fall back to setting `width` or `height` (depending on the container's `flex-direction` property). You can do this by setting a `flex-basis` value of `auto`, which will instruct the browser to use the element's [main size](http://dev.w3.org/csswg/css-flexbox/#box-model) property (i.e., its `width` or `height`). Demo [8.2.b](https://philipwalton.github.io/flexbugs/8.2.b-workaround.html) offers an example of this. 340 | 341 | 342 | 343 | 344 | 345 | ### Flexbug #9 346 | 347 | _Some HTML elements can't be flex containers_ 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 363 | 370 | 381 | 382 |
DemosBrowsers affectedTracking bugs
357 | 9.1.a – bug
358 | 9.1.b – workaround
359 | 9.2.a – bug
360 | 9.2.b – workaround
361 | 9.3.a – bug
362 | 		364 | Chrome
365 | Edge
366 | Firefox (fixed in 63)
367 | Opera
368 | Safari (fixed in 11) 369 | 		371 | Chrome #375693 (fixed)
372 | Chrome #700029 (fixed)
373 | Edge #4511145 (obsolete)
374 | Firefox #984869 (fixed)
375 | Firefox #1230207 (fixed)
376 | Firefox #1397768 (fixed)
377 | Safari #169082 (fixed)
378 | Safari #169700 (fixed)
379 | Safari #190065 (fixed) 380 |
383 | 384 | Certain HTML elements, like ``, `
` and ` 46 | 47 | 48 | -------------------------------------------------------------------------------- /docs/9.1.b-workaround.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbug 9.1.b (workaround) 7 | 8 | 42 | 43 | 44 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /docs/9.2.a-bug.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbug 9.2.a (bug) 7 | 8 | 40 | 41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /docs/9.2.b-workaround.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbug 9.2.b (workaround) 7 | 8 | 40 | 41 | 42 |
43 |
44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /docs/9.3.a-bug.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbug 9.3.a (bug) 7 | 8 | 40 | 41 | 42 | 43 |
44 | these elements 45 |
46 |
47 | shouldn't be 48 |
49 |
50 | stacked vertically 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Flexbugs Static Files 2 | 3 | This folder primarily houses static html files containing [bugs and their workarounds](https://github.com/philipwalton/flexbugs#the-bugs-and-their-workarounds) for hosting on GitHub pages. You can view their source code in this folder [here](https://github.com/philipwalton/flexbugs/tree/master/docs). 4 | 5 | In order to ensure that the original documentation stays on GitHub [README](https://github.com/philipwalton/flexbugs#flexbugs) (and not on GitHub pages), absolute links have been used (instead of relative links) wherever applicable. 6 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate --------------------------------------------------------------------------------