Skip to content

Instantly share code, notes, and snippets.

@wilddeer

wilddeer/flexbox-adventures.md

Last active November 29, 2018 05:54
Show Gist options
  • Save wilddeer/a7d8d806dd84bf5c03e2 to your computer and use it in GitHub Desktop.
Save wilddeer/a7d8d806dd84bf5c03e2 to your computer and use it in GitHub Desktop.
Download ZIP
Невероятные приключения флексбокса в фаерфоксе
Raw
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

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

@kizu
Copy link

kizu commented Apr 24, 2015

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

@kizu
Copy link

kizu commented Apr 24, 2015

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

@wilddeer
Copy link
Author

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

@wilddeer
Copy link
Author

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

@kizu
Copy link

kizu commented Apr 24, 2015

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

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

@kizu
Copy link

kizu commented Apr 24, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment