Flex-wrap не работает, как ожидалось, в Safari

На домашней странице http://www.shopifyexperte.de/ есть два модуля flex-box, один под "Kundenstimmen" и один под "Neueste Beiträge...". Внутренние коробки должны упаковываться, когда они опускаются ниже 220 пикселей и не растут выше 30% ширины. Это работает в последних версиях Chrome, FF и Opera (все на Mac), но в Safari 8.0.5 (Mac) и в любом браузере iOS коробки никогда не образуют строки, даже если есть достаточно места. Они всегда обертывают, каждый на своем собственном ряду.

CSS для контейнера:

.homepage-testimonial-container {
	display: flex;
	display: -webkit-flex;
	-webkit-flex: 1;
	flex: 1;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin-top: 1em;
}

Ответы

Ответ 1

Кажется, это ошибка в Safari. В отдельном выпуске я тестировал, используя min-width вместо auto в строках, где вы говорите что-то вроде -webkit-flex: 1 1 auto;.

У этого вопроса есть информация: fooobar.com/questions/165851/...

Ответ 2

Установить такие дочерние элементы, как это, кажется, работает для меня

flex: 1 0 auto;

Ответ 3

Настройка flex-basis: 20em также работает, min-width: 20em не работает.

Ответ 4

У меня была аналогичная проблема в Safari (9.1.3) с сеткой Bootstrap 3 (например, col-md-4) в сочетании с flex. Я решил это, установив margin: 0 -1px; на элементы col и flex-wrap: wrap; на обертке.

Ответ 5

Это действительно ошибка Safari. Подробности доступны на отличной странице flexbugs, но процитируйте ее:

Safari использует объявления min/max width/height для фактического рендеринга размер элементов гибкости, но он игнорирует эти значения при расчете сколько элементов должно быть в одной строке многострочного flex контейнер. Вместо этого он просто использует значение элемента flex-base или его width, если для основы flex установлено значение auto.

Итак, исправление/обходное решение - как предложено другими ответами здесь - это установить flex-basis на явную ширину, а не на auto.

Ответ 6

Я использую Safari 11.0.1, и ошибка сохраняется. Я использую Bootstrap 3 в сочетании с дисплеем: flex на моих элементах .row. Я добавил следующее к моему css для ориентации элементов столбца. Кажется, что что-то связано с процентами ширины в Safari, которые не соблюдаются правильно.

.row [class*=col-]{
    margin:0 -.3px;
}