IE11 is broken

[kurtsson]

[kurtsson]

• Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. see bug. Fixed in all versions > 10.
• IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation
• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
• IE 11 does not vertically align items correctly when min-height is used see bug
• Firefox 51 and below does not support Flexbox in button elements. Fixed in version 52.
• In Safari 10.1 and below, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. Fixed in all versions > 10.1 (See bug) The bug also appeared in Chrome but was fixed in Chrome 51
• Flexbugs: community-curated list of flexbox issues and cross-browser workarounds for them
• In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
• The space-evenly value of the justify-content property, as described in the CSS Box Alignment Module Level 3 is only supported by some browsers.

From https://caniuse.com/#feat=flexbox