Как сделать так, чтобы элемент у flex'a не брал высоту от соседнего элемента?

Question

[ForSureN1]

Добрый день, возникла такая проблемка, что при раскрытии подменю у элемента, справа появляется пустое место, из за того что высота становится равной левому элементу, думаю что это можно как то решить с помощью гридов, но что то пока безуспешно, в данном скрине сделано на флексах + flex-wrap

Заранее благодарю

Comments

[Вадим]

https://habr.com/ru/post/467049/

[ForSureN1]

Вадим, Большое спасибо за потраченное время, но к сожалению на данной странице я не нашел решения моей проблемы :)

[Ankhena]

Как сделать так, чтобы соседний элемент у flex'a не брал высоту от соседнего элемента?

Задать флексу align-items отличный от stretch или align-self для конкретного элемента.

Но проблему это не решит, потому что она не в высоте элемента. А в том, что строка идет ровной строкой.

Что можно сделать:
- Перерисовать меню (убрать этот лишний уровень)
- Открывать подменю абсолютом
- Разбить пункты основного меню на столбцы
- Гадкий вариант - пересчитывать высоту и использовать flex-direction: columns
- Ещё что-нибудь пересчитывать на JS (span N у гридов и т.д.)

[ForSureN1]

Ankhena, Абсолютом будет не очень красиво смотреться, я думаю остановлюсь на варианте разбить эту колонку на 2 независящих друг от друга, и на бэкэнде уже пусть выводят в левый столбец четные элементы, а в правый нечетные

[Ankhena]

ForSureN1, можно и так. На мобилках display contents поможет собрать их в одну.

Answer 1

[Илья Корень]

По идее вам нужно менять направление основной оси flex'a: flex-direction: column; и тут уже подстраивать, задав высоту flex-контейнера.

Comments

[ForSureN1]

Да, действительно так работает, но только при условии что у нас фиксированная высота для родителя, к сожалению высоту я задать не могу, т.к. количество элементов не ограниченно, и из за придется добавлять скролл к родителю, что не очень красиво будет выглядеть

[ForSureN1]

И нашел еще один нюанс, когда мы скрываем подменю, элементы которые находятся справа, начинают перестраиваться на левую колонку, думаю единственное решение будет создать 2 отдельные колонки для этих элементов, чтобы они никак не зависели друг от друга

[Илья Корень]

ForSureN1, ога, но вроде как это единственный вариант решения на флексах.

Answer 2

[Егор Живагин]

Выход относительно простой: если есть элемент с несколькими колонками и без фиксированной высоты - брать grid вместо флексов. Проблема старая и в вашем случае любые другие решения кажутся костылями, имхо (в том числе хранить разделение на 2 колонки на бэкенде)

Comments

[ForSureN1]

Да, но дело ведь в том что строка всегда едина в сетке, она не может разделиться на 2 части по вертикали

[Ankhena]

ForSureN1, гридами может. Но в вашем случае неизвестно на сколько частей. Точнее это нужно узнавать на JS по числу пунктов в подменю с учетом размера строки.

[ForSureN1]

Ankhena, Не совсем понял вас, у нас всегда 2 колонки есть, не больше, не меньше, не совсем понимаю для чего нужен JS в данном случае

[Ankhena]

ForSureN1, чтобы когда открывается один какой-то пункт (пусть слева, как на скрине), он получил span N строчек. Чтобы элементы справа за счет этого поднялись наверх.

[ForSureN1]

Ankhena, ааа, все понятно