Невероятные приключения флексбокса в фаерфоксе

flexbox-adventures.md

Невероятные приключения флексбокса в фаерфоксе

• Блок с прокруткой в вертикальном флексбоксе не работает — ставить max-height: 100% на контейнер
• word-wrap: break-word не работает внутри флексбокса — спасает min-width: 0 на элементе флексбокса (overflow-x: hidden тоже работает)
• Флексбокс не работает на кнопке — класть внутрь блок и на нем делать флексбокс
• Элемент флексбокса с ellipsis расфигачивает все по ширине — min-width: 0 на флексбокс / max-width: 100% на самого верхнего разъехавшегося родителя
• Элементы флексбокса не выравниваются по базовой линии, если внутри еще один флексбокс — использовать inline-flex

О других невероятных приключениях вы узнаете в следующей серии

Везде, где нужно прописать min-width: 1px, насколько я помню, работает и min-width: 0. Ещё для этих же случаев бывает удобно один раз задавать где-то уровнем выше на блоке, у которого есть не нулевой flex-grow (и, очевидно, флексовый родитель) width: 0 — это магически всем детям сделает min-width: 0 и заставит схлопываться внутренние блоки.

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

@kizu min-width: 0 действительно работает, хотя я не очень понял, почему. Значение по-умолчанию ноль же? Про базовую линию — http://codepen.io/wilddeer/pen/aObevX

Фу, ссылки на людей не работают. Грустные гистокомменты.

Да, уведомлений нет :(

Про min-width, это вот отсюда (где пишут, что «это не бага, это фича, лол») — https://bugzilla.mozilla.org/show_bug.cgi?id=1108514 (и там ссылки на соседние ишью есть)

Про базовую линию: http://codepen.io/kizu/pen/zGYgKy — чаще всего это можно обойти использованием inline-flex вместо flex, тогда Fx начинает нормально работать с базовой линией.