Измените параметр overflow-visible на overflow-auto, если размер элемента больше области просмотра. ⇐ CSS

[Anonymous]

У меня есть компонент Angular, который открывает другой компонент как offcanvas:

Код: Выделить всё

  openTop() {
this.offcanvasService.open(AdvancedSearchComponent, {
position: 'top',
backdropClass: 'bg-dark',
panelClass: 'h-25 bg-danger text-bg-danger flex-column',
keyboard: true,
});
}

Тогда в этом компоненте offcanvas у меня есть что-то вроде этого:

Код: Выделить всё

[url=#]
[img]assets/...[/img]
    />[/url]







...

И некоторые CSS-коды, которые могут иметь значение:

Код: Выделить всё

:host {
height: 100%;
display: flex;
flex-direction: column;
}
form {
scrollbar-gutter: stable;
}

Если я добавлю overflow-auto к элементу , высота верхнего элемента offcanvas составит 25vh, и появится полоса прокрутки, когда содержимое не будет отображаться. t помещается по вертикали.
Если я добавлю видимый для переполнения к верхнему элементу или вообще не добавлю класс переполнения, то Панель offcanvas расширяется, когда содержимое не помещается по вертикали. На самой панели offcanvas есть несколько кнопок с data-bs-toggle="collapse", которые могут увеличивать содержимое и выводить его за пределы экрана. Проблема в том, что если содержимое выходит за пределы экрана, полоса прокрутки отсутствует, поскольку у меня есть видимость переполнения. Мне нужно, чтобы переполнение было видимым, когда панель offcanvas занимает 25–100 % области просмотра, и автоматически переполнялось, когда содержимое превышает 100 % области просмотра.
Я хочу добиться того, чтобы верхняя панель вне холста подстраивалась по размеру к содержимому, но когда содержимое выходит за пределы размера экрана, чтобы появилась полоса прокрутки, чтобы можно было видеть весь контент.
Что я пробовал:

• Некоторые ТАК-вопросы/ответы предполагают, что проблема может заключаться в том, что тело {overflow: скрыто. Это действительно так в моем приложении, по крайней мере, когда я проверяю элементы на своем offcanvas. Однако удаление этого стиля из тела привело только к добавлению полосы прокрутки, которая прокручивает «фоновое» содержимое, а не содержимое вне холста.
• У меня есть попробовал добавить дополнительные элементы с разными классами.
• Я пробовал использовать максимальную высоту и высоту в CSS или соответствующие классы начальной загрузки моего элемента, но мне не удалось добиться того, чего я хотел.
• Некоторые решения предлагаю использовать отступы для решения подобных проблем, но я не понял, как это сделать.

Подробнее здесь: https://stackoverflow.com/questions/790 ... s-bigger-t