Row Wrap в гибкой коробке, не обертывающей в Safari

В гибком контейнере есть четыре ребенка, каждый из которых имеет гибкую основу на 25% и ширину min. flex-flow установлен на обертку строк. Браузеры, кроме Safari, обрабатывают это как ожидалось: если минимальная ширина достигнута, она переносит следующий элемент в следующую строку. В Safari он переполняет контейнер.

Смотрите демонстрацию здесь: http://codepen.io/lbilharz/pen/aJbkI

НЕФРИТА

h1 Why this ain't wrappin' in mobile-safari?
  .flex
    for i in ['one','two','three','four']
      .item
        h2=i

Стилус

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

Любые идеи?

Ответ 1

В ответ на комментарий на bugs.webkit.org кажется, что решение прост!

Если ваш стиль

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1;
    flex: 1;
}

вам просто нужно добавить более разъяснительную информацию в свою декларацию flex. На самом деле, я думаю, что только одна строка должна так измениться

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
}

Ответ 2

Я использую max-width для своих элементов flex, поэтому я смог решить эту проблему, явно установив max-width в свойство flex:

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
li {
  width: 100%;
  max-width: 500px;
  flex: 1 1 500px;
}

Ответ 3

Это ошибка IOS Safari. Таким образом, исправление/обходное решение заключается в том, чтобы установить гибкий базис в явную ширину, а не автоматически для дочернего элемента.

Ответ 4

Некоторые браузеры не полностью поддерживают все элементы CSS3. Попробуйте следующее:

  display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;