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

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, это вот отсюда (где пишут, что «это не бага, это фича, лол») — https://bugzilla.mozilla.org/show_bug.cgi?id=1108514 (и там ссылки на соседние ишью есть)

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