Почему div ng2-pdfjs-viewer отображается за пределами div-обертки ⇐ Html

[Anonymous]

Среда: Angular 17.x
Проблема: элемент div ng2-pdfjs-viewer отображается за нижней границей раздела-обертки. См. прикрепленный снимок экрана.
Пытался изменить высоту элемента div в ng2-pdfjs-viewer. Но какую бы высоту я ни назначал, нижний скроллер средства просмотра PDF-файлов оказывается ниже нижней границы всего оборачиваемого div.
Невозможно отладить проблему.
Часть компонента.html:

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

Mandate Documents




Add Document Files(only PDF allowed): 
 

Add Document


@if(showUploadOption){




Select Document Type

None
Other Doc

{{ x.name }}





Document Name




Select File



@if(file){

Selected File: {{ file.name}}


Upload File

 

cancel


}

}

Uploaded Files:
@if(doc){
@if(!doc.docs){
   None
}
@if(doc.docs){




{{i + 1}}.  {{ e.name }}




delete




}
}




@if(pdfDocName){


Document: {{ pdfDocName }}



cancel


}

comComponent.css

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

.box-action {
border-left: #5047fc 7px solid;
border-radius: 10px;
background-color:var(--offWhite);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 10px;
}

.flex {
display: flex;
width: 100%;
}

.flex-align-center {
display: flex;
align-items: center;
}

.flex-column {
display: flex;
flex-direction: column;
width: 100%;
}

.icon-cancel {
color:red;
margin-left: 10px;
cursor: pointer;
text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
}

.ml-1r {
margin-left: 1rem;
}

.mt-1r {
margin-top: 1rem;
}

.pdf-viewer {
max-height: 40vh !important;
}

.screenBig49per {
width: 49%;
max-width: 90vw;
}

.screenSmall {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 100vw;
}

.w-20r {
width: 20rem;
max-width: 90vw;
}

Подробнее здесь: https://stackoverflow.com/questions/798 ... apping-div