Как заставить IE работать c flex-wrap?

Question

[MarkoPip]

В IE11 не переносятся флекс элементы, хотя wrap прописано. Просто идет в ряд, как будто бы этого свойства не было.

<ul class="about-programm__desc">
            <li class="about-programm__desc-item">
            </li>
            <li class="about-programm__desc-item">
            </li>
            <li class="about-programm__desc-item">
            </li>
            <li class="about-programm__desc-item">
            </li>
            <li class="about-programm__desc-item">
            </li>
            <li class="about-programm__desc-item">
            </li>
            <li class="about-programm__desc-item about-programm__desc-item--video">
            </li>
          </ul>

.about-programm__desc {
  -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
  }

.about-programm__desc-item {
  position: relative;
  padding: 82px 40px 10px 20px;
  border-radius: 5px;
    width: 362px;
    min-height: 190px;
    margin-bottom: 30px;
}

Comments

[Alams Stoyne]

Хм... у меня всё работает

[MarkoPip]

Alams Stoyne, эх, а у меня почему-то нет(

проверь пожалуйста вот так вот еще

.about-programm__desc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 1400px) {
  .about-programm__desc {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.about-programm__desc-item {
  position: relative;
  width: 260px;
  min-height: 154px;
  padding: 82px 40px 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}
@media (min-width: 1400px) {
  .about-programm__desc-item {
    width: 362px;
    min-height: 190px;
    margin-bottom: 30px;
  }
}

[Flying]

А как у вас определяется размер flex контейнера? В приведённом примере кода этой информации нет. В целом было бы хорошо загрузить код на тот же codepen чтобы его можно было сразу посмотреть вживую.

[Alams Stoyne]

И так работает но только с разрешения 1400 и больше

[MarkoPip]

Flying, https://codepen.io/qwerty12ss/pen/yQOaXg

[MarkoPip]

Всем спасибо, решилось тем, что я написал ширину у списка, во всех браузерах она автоматически была равна ширине контейнера, где лежит список, в ие - нет.

Answer 1

[Вадим Кот]

Вот такой код https://codepen.io/anon/pen/BGKzEE работает

Comments

[MarkoPip]

А у меня не работает, не понимаю почему, просто скопировал стили, а он все равно не переносит

[MarkoPip]

Всем спасибо, решилось тем, что я написал ширину у списка, во всех браузерах она автоматически была равна ширине контейнера, где лежит список, в ие - нет.