4-column Flexbox-Layout works great on any browser, besides IE, where it shows only 3 columns in a row

Question

I am coding a website (navigation isn´t responsive yet) and I´m using mainly Flexbox for columns and positioning. The website looks good in Firefox, Chrome and Edge, where it shows the desired 4-column Layout in the Intro section under the header, the cities section, the testimonials and pricing.

But when I open the website in IE(11), it only shows 3 columns where I have defined 4 and on the pricing section, it shows only 2 columns where I defined 3.

When I delete the column-padding, it shows the desired number of columns next to eath other, without the padding. I already gave those columns the box-sizing: border-box attribute and I used autoprefixer to prefix all the CSS3 things I used.

It still doesn´t work. Here is the link: http://omnifood.marvinklempert.de/

Code is in this codepen: https://codepen.io/anon/pen/KYqVwY

.grid {
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.column {
-webkit-box-sizing: border-box;
        box-sizing: border-box;
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}
.bigger { -webkit-box-flex: 2.5; -ms-flex: 2.5; flex: 2.5; }
.halves .column  { -webkit-box-flex: 0; -ms-flex: 0 1 50%; flex: 0 1 50%;}
.thirds .column  { -webkit-box-flex: 0; -ms-flex: 0 1 33.3333%; flex: 0 1 33.3333%;}
.fourths .column { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%;}
.fifths .column  { -webkit-box-flex: 0; -ms-flex: 0 1 20%; flex: 0 1 20%;}
.sixths .column  { -webkit-box-flex: 0; -ms-flex: 0 1 16.6666%; flex: 0 1 16.6666%; }
.sevenths .column { -webkit-box-flex: 0; -ms-flex: 0 1 14.2857%; flex: 0 1 14.2857%; }
.eights .column  { -webkit-box-flex: 0; -ms-flex: 0 1 12.5%; flex: 0 1 12.5%; }

@media (max-width: 900px) {
.grid { display: block; }
}

Answer 1

You need to set a max-width equal to your flex-basis for IE11 to render this layout properly.

So, for example:

.fourths .column { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%; max-width: 25%}