Как сделать что-бы высота блока была строго по контенту?

Question

[Kristina8787]

Здравствуйте. У меня стоит событие на input, при клике открывается div под ним,как выпадающее меню, я поставила этому блоку height:auto , при первом клике всё хорошо,дальше если кликаем то по условию блок закрывается,и вот если снова кликнуть и блок откроется,то высота становится максимальной, как сделать чтобы блок всегда был по высоте контента? на блоке стоит max-height:300px и overflow-y:auto

Comments

[Максим]

вообще высоту не указывайте

[Kristina8787]

Много Чего, и да и не совсем. у меня position absolute стоит и сдвиг вниз,вот этот сдвиг всё портил. но всё равно спасибо)

[Максим]

Kristina8787, подробностей не было и по этому совет на вскидку

Answer 1

[Дмитрий Марков]

Попробуй с помощью js получить высоту скрытого блока

element.style.display = 'block';
const elementHeight = element.innerHeight;
element.style.display = 'none';

Затем записать в css переменную

element.setAttribute('style', `--height:${height};`):

А потом уже можно подставить высоту каждому блоку не боясь что будет больше чем нужно.

.element {
height: var(--height);
max-height: 300px;
}