Вопрос по firefox, flexbox – Firefox игнорирует вертикальные поля в элементах flex (дочерних элементах flexbox), если в контейнере не объявлена ​​явная высота

11

У меня есть адаптивная основанная на процентах сетка, созданная с помощью flexbox с использованием процентных полей. Хорошо играет в Chrome и Safari. Однако Firefox сворачивает поля, если для элементов не установлена ​​явная высота. Кто-нибудь знает обходной путь?

Ваш Ответ

2   ответа
3

Вы можете указать ширину поля в процентах и ​​высоту поля в единицах vw. Это работает, только если оболочка flexbox не имеет фиксированной ширины.

Например:margin: 0 2% 2vw 0;

Рабочий пример:http://codepen.io/anon/pen/JKGjdB

Спасибо Дэвид! Интересно jlevinson
20

Это было сообщено ранее какошибка в Firefox / Gecko, но это на самом делеошибка в Chrome / Blink.

На ребенка блока (display:block) элемент, процентное поле и отступ будут соответствовать ширине блока. Это, вероятно, поведение, которое вы ожидаете, и это то, что Blinkневерно делает для потомков гибких контейнеров, как описано на странице ошибок выше.

Нов гибком контейнере процентное поле и отступдолжен разрешить против соответствующего измерения (так, например, margin-top / margin-bottom будет сопоставляться с высотой контейнера).

Более того, если контейнер не имеет определенной высоты (например, если он имеетheight:auto) тогда проценты не могут быть разрешены, поэтому они разрешаются до 0.

Спасибо за знание jlevinson

Похожие вопросы