display: flex not working on Internet Explorer
css, flexbox, html
Solution
Internet Explorer doesn't fully support Flexbox due to:
Partial support is due to large amount of bugs present (see known issues).
Screenshot and infos taken from caniuse.com
Notes
Internet Explorer before 10 doesn't support Flexbox, while IE 11 only supports the 2012 syntax.
Known issues
- 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.
- In IE10 the default value for `flex` is `0 0 auto` rather than `0 1 auto` as defined in the latest spec.
- IE 11 does not vertically align items correctly when `min-height` is used. See bug.
Workarounds
Flexbugs is a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.
- Minimum content sizing of flex items not honored
- Column flex items set to `align-items: center` overflow their container
- `min-height` on a flex container won't apply to its flex items
- `flex` shorthand declarations with unitless `flex-basis` values are ignored
- Column `flex` items don't always preserve intrinsic aspect ratios
- The default flex value has changed
- `flex-basis` doesn't account for `box-sizing: border-box`
- `flex-basis` doesn't support `calc()`
- Some HTML elements can't be flex containers
- `align-items: baseline` doesn't work with nested flex containers
- Min and max size declarations are ignored when wrapping flex items
- Inline elements are not treated as flex-items
- Importance is ignored on flex-basis when using flex shorthand
- Shrink-to-fit containers with `flex-flow: column wrap` do not contain their items
- Column flex items ignore `margin: auto` on the cross axis
- `flex-basis` cannot be animated
- Flex items are not correctly justified when `max-width` is used
Problem
My flex container: ``` .back_pattern { display: flex; display: -ms-flexbox; -ms-flex-pack: center; flex-direction: column; align-content: center; justify-content: center; min-height: 100vh; width: 100%; } ``` On other browsers everything works. ie11 : http://take.ms/68dHo ; chrome : http://take.ms/JhcEH What's problem?