@plinetus
верстальшик

Почему при использовании flex-wrap блоки не занимают свободное пространство?

Доброго времени суток! У меня в задачах есть меню, у которого есть пункты. В одной строке два пункта и дальше идет перенос с помощью flex-wrap: wrap.
6158942d92f1c612273399.png
Все бы ничего, но при наведении на пункт, он разворачивается (меняя свою высоту) и появляются подпункты.
Но когда расширяется один из пунктов, то пункт который находится с ним в одной строке тоже "якобы" меняет свою высоту, и пункты ниже тоже съезжают.
615894f8621dd996717036.png
Мне нужно, чтобы пункты, которые съезжают вниз изза псевдо высоты, не съезжали. Либо, чтобы этой псевдо высоты вообще не было.

61589648cc129841157639.png

При этом нельзя ограничивать высоту контейнера и использовать flex-direction: column; потому что, количество этих пунктов будет со временем увеличиваться!
Как мне добиться этого результата?
  • Вопрос задан
  • 197 просмотров
Пригласить эксперта
Ответы на вопрос 1
ikonkov
@ikonkov
в flex-direction: row так работать не будет, можно сделать вот так:

https://codepen.io/ikonkov/pen/oNwOVEd

Так как вы хотите можно реализовать с правда высоту блока контейнера надо ограничивать
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы