Проблема с position: sticky и overflow: hidden?

Question

[danilr]

Есть блок, верхний блок "фильтр" должен быть зафиксирован при скролле, и при нажатии раскрывается.
Закрепил я этот блок так:

.filter{
    position: sticky;
    top: 0;
}

Проблема в том, что раскрываемый блок может не влезть в экран, поэтому лишнее обрубается. Поэтому я сделал следующее - блоку который раскрывается задал такие стили:

.content {
    max-height: 50vh;
    overflow-y: scroll;
}

Было так:
Если хочу скролл сделать, выходит такое:

Помогите решить задачку, пожалуйста

Answer 1

[tyzberd]

используйте popover https://getbootstrap.com/docs/4.3/components/popovers/ который будет генерироваться перед закрывающимся тегом body и на js показываться в нужном месте. Там можно указать где генерировать, можно сделать перед вашим .content.
Эта библиотека есть отдельно от bootstrap

Comments

[danilr]

Я на Vue делаю, проблематично этот popover сделать. Тем более у меня чуть ниже блок "дополнительно" при наведении выезжает слева и становится как эта кнопка справа от основного блока.