:warning: UPDATE: this repo is no longer maintained, as most of the bugs listed here are fixed in modern browsers.

Flexbugs

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.

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 so everyone else can benefit.

The bugs and their workarounds

1. Minimum content sizing of flex items not honored
2. Column flex items set to align-items: center overflow their container
3. min-height on a flex container won't apply to its flex items
4. flex shorthand declarations with unitless flex-basis values are ignored
5. Column flex items don't always preserve intrinsic aspect ratios
6. The default flex value has changed
7. flex-basis doesn't account for box-sizing: border-box
8. flex-basis doesn't support calc()
9. Some HTML elements can't be flex containers
10. align-items: baseline doesn't work with nested flex containers
11. Min and max size declarations are ignored when wrapping flex items
12. Inline elements are not treated as flex-items
13. Importance is ignored on flex-basis when using flex shorthand
14. Shrink-to-fit containers with flex-flow: column wrap do not contain their items
15. Column flex items ignore margin: auto on the cross axis
16. flex-basis cannot be animated
17. Flex items are not correctly justified when max-width is used

<!-- To preserve old links -->

<a name="1-minimum-content-sizing-of-flex-items-not-honored"><a>

Flexbug #1

Minimum content sizing of flex items not honored

<table> <tr> <th align="left">Demos</th> <th align="left">Browsers affected</th> <th align="left">Tracking bugs</th> </tr> <tr valign="top"> <td> <a href="https://philipwalton.github.io/flexbugs/1.1.a-bug.html">1.1.a</a> &ndash; <em>bug</em><br> <a href="https://philipwalton.github.io/flexbugs/1.1.b-workaround.html">1.1.b</a> &ndash; <em>workaround</em><br> <a href="https://philipwalton.github.io/flexbugs/1.2.a-bug.html">1.2.a</a> &ndash; <em>bug</em><br> <a href="https://philipwalton.github.io/flexbugs/1.2.b-workaround.html">1.2.b</a> &ndash; <em>workaround</em> </td> <td> Chrome (fixed in 72)<br> Opera (fixed in 60)<br> Safari (fixed in 10) </td> <td> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=426898">Chrome #426898 (fixed)</a><br> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=596743">Chrome #596743 (fixed)</a></br> <a href="https://bugs.webkit.org/show_bug.cgi?id=146020">Safari #146020 (fixed)</a> </td> </tr> </table>

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.

According to the current flexbox specification:

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.

Workaround

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.

<!-- To preserve old links -->

<a name="2-column-flex-items-set-to-align-itemscenter-overflow-their-container"><a>

Flexbug #2

Column flex items set to align-items: center overflow their container

<table> <tr> <th align="left">Demos</th> <th align="left">Browsers affected</th> </tr> <tr valign="top"> <td> <a href="https://philipwalton.github.io/flexbugs/2.1.a-bug.html">2.1.a</a> &ndash; <em>bug</em><br> <a href="https://philipwalton.github.io/flexbugs/2.1.b-workaround.html">2.1.b</a> &ndash; <em>workaround</em> </td> <td> Internet Explorer 10-11 (fixed in Edge) </td> </tr> </table>

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.

Workaround

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.

<!-- To preserve old links -->

<a name="3-min-height-on-a-flex-container-wont-apply-to-its-flex-items"><a>

Flexbug #3

min-height on a flex container won't apply to its flex items

<table> <tr> <th align="left">Demos</th> <th align="left">Browsers affected</th> <th align="left">Tracking bugs</th> </tr> <tr valign="top"> <td> <a href="https://philipwalton.github.io/flexbugs/3.1.a-bug.html">3.1.a</a> &ndash; <em>bug</em><br> <a href="https://philipwalton.github.io/flexbugs/3.1.b-workaround.html">3.1.b</a> &ndash; <em>workaround</em><br> <a href="https://philipwalton.github.io/flexbugs/3.2.a-bug.html">3.2.a</a> &ndash; <em>bug</em><br> <a href="https://philipwalton.github.io/flexbugs/3.2.b-workaround.html">3.2.b</a> &ndash; <em>workaround</em> </td> <td>Internet Explorer 10-11 (fixed in Edge)</td> <td><a href="http://web.archive.org/web/20170312223506/https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview">IE #802625 (archived)</a></td> </tr> </table>

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.

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.

Workaround

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.

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 shows a visual design where min-height is required, and demo 3.2.b shows how this bug can be avoided with a wrapper element.

<!-- To preserve old links -->

<a name="4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored"><a>

Flexbug #4

flex shorthand declarations with unitless flex-basis values are ignored

<table> <tr> <th align="left">Demos</th> <th align="left">Browsers affected</th> </tr> <tr valign="top"> <td> <a href="https://philipwalton.github.io/flexbugs/4.1.a-bug.html">4.1.a</a> &ndash; <em>bug</em><br> <a href="https://philipwalton.github.io/flexbugs/4.1.b-workaround.html">4.1.b</a> &ndash; <em>workaround</em> </td> <td>Internet Explorer 10-11 (fixed in Edge)</td> </tr> </table>

Prior to the release of IE 10, the flexbox spec at the time stated that a flexbox item's preferred size required a unit when using the flex shorthand:

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.

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.

Workaround

When using the flex shorthand, always include a unit in the flex-basis portion. For example: 1 0 0%.

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.

<!-- To preserve old links -->

<a name="5-col