html - display: flex not working on Internet Explorer

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?

Answer

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 10 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.

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