Flexbox-Layout с 4 столбцами отлично работает в любом браузере, кроме IE, где он показывает только 3 столбца подряд

Question

Я кодирую веб-сайт (навигация пока не отвечает), и я использую в основном Flexbox для столбцов и позиционирования.Веб-сайт выглядит хорошо в Firefox, Chrome и Edge, где он показывает желаемую 4-колоночную разметку в разделе «Введение» под заголовком, разделом о городах, отзывами и ценами.

Но когда я открываю веб-сайт в IE (11), он показывает только 3 столбца, где я определил 4, а в разделе цен - только 2 столбца, где я определил 3.

Когда я удаляю заполнение столбцами, оно показывает желаемое количество столбцов рядом с другим, без заполнения.Я уже дал этим столбцам атрибут box-sizing: border-box, и я использовал autoprefixer, чтобы префиксировать все элементы CSS3, которые я использовал.

Это все еще не работает.Вот ссылка: http://omnifood.marvinklempert.de/

Код находится в этом коде ручки: 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

Вам нужно установить max-width равным flex-basis для IE11, чтобы правильно отобразить этот макет.

Так, например:

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