flex property not working in IE

Question

I have been unable to determine why flexbox is not working in IE 11.

For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information

Answer 1

As in @Michael_B answer, limit the growth with Flexbox flex property: flex: 0 1 (1/n - b) taken in % value, where n is the number of flex items in a row and b is the gap that you want to see between flex items in IE.

On the flex items along with flex property above use the max-width property with percentage value of 1/n - b.

In your case the generalized CSS for the flex item would be:

li {
    // ... the remaining code from your snippet
    // Calculate the following manually and insert or use CSS preprocessor that does math for you.
    // See the formula explanation above.
    max-width: (your flex container max-width / 2) * 100% - b; 
    flex: 0 1 (your flex container max-width / 2) * 100% - b;
}

In actual case with 5 items / row there will be (1/5) * 100% - 1% = 19% => max-width: 19% and flex: 0 1 19%;.

Play with b parameter to make flex items short enough to allow flex: wrap; work.