5

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

<ul class="parent">
	<li class="child-1"></li>
	<li class="child-2"></li>
	<li class="child-3"></li>
</ul>

Блок .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 то ничего не изменится - под псевдоэлемент браузер все так же будет резервировать место и рассчитывать положение элементов с учетом абсолютно-позиционированного элемента.

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

2

2 ответа 2

2

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

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

2
  • 1
    Постарайтесь дать немного более развернутый ответ, чтобы его попросту не удалили 16 сен 2016 в 10:11
  • Вот это развернутый ответ. Внесите правку, чтобы другие пользователи без труда могли разобраться с решением проблемы. 19 сен 2016 в 7:30
0

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.