Flex, Mozilla и абсолютно позиционированные элементы

#html #css #mozilla #flexbox

Давно встречаю данный баг в Мозилле но так и не нашел решения как его победить.
Итак, есть родительский блок с тремя дочерними элементами:




	

	

	






Блок .child-3 имеет position:absolute и по логике вырван из потока. На родительский
блок задаем display:flex и, например, justify-content:space-between. Все браузеры включая
IE11 отрабатывают правильно: .child-1 и .child-2 разъезжаются к противоположным краям
.parent. Но в Mozilla это не так: она резервирует место для .child-3, которого в потоке
нет, и из-за этого .child-2 болтается где-то посередине родительского блока. Более
того, если .child-3 заменить на .parent:after со свойствами content:""; position:absolute
то ничего не изменится - под псевдоэлемент браузер все так же будет резервировать место
и рассчитывать положение элементов с учетом абсолютно-позиционированного элемента.

Как можно решить данную проблему?
    

Ответы

Ответ 1

Решил такую проблему, отказавшись от flexbox в пользу display: table.

Было 3 кнопки, расположенных по диагонали при помощи justify-content: space-between;
align-items: center и крайним элементам были даны align-self: flex-start / flex-end
соответственно. Потом в блок были добавлены скрытые прозрачные абсолютно спозиционированные
кнопки, и в мозилле верстка сломалась (выделялось место в потоке под скрытые кнопки,
и центральная кнопка смещалась) Пришлось вынести 3 изначальные кнопки в таблицу (каждая
в своей строке), и все заработало, как надо.


Ответ 2

Попробуйте указать в родительском блоке: flex-wrap: wrap, а в child-ах указать их
размеры. Используйте в данном случае не display: flex, а display: inline-flex.

Линейное построение, с переносом при указании размеров, перенесет второй элемент
влево при justify-content: space-between, если первый элемент занимает пространство
столько, что второй по своим размерам туда не влезет и не будет никакого центрирования
второго элемента. 

Ширину элемента лучше указывать через flex-basis.