flex-direction: 列； 不适用于 IE 和 Edge

Question

I have a menu with list item displayed in a vertical list using flexbox and flex-direction:column . It's working great in all browsers except for IE and Edge.

I tried tricks like adding display flex to the flex container but it's not working either.

Any ideas ?

Here's the website where the problem happens : http://lesdeuxvagues.com/demo

Click the plus button in the menu to see the problem

CSS:

ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}

Answer 1

Turns out i just fixed the issue by adding display:block; to my list items. They had a display:table-cell from the foundation framework that might have caused this problem!