I am trying to use the ng-pdf-viewer library to embed a component with a PDF into a web-page (angular). I have a container div, that I want to be the parent of the pdf viewer. It's dimensions are not fixed (it's not a fixed pixel value, the size of the container depends on the size of the screen / other elements - it fills the space). My goal is to have the pdf viewer be exactly the size of the container and have a scroll for long pdfs within that container (the bordered-content div, blue in the screenshots).

Here is my code:

    <div class="bordered-content flex-fill" style="background-color: blue">
      <div class="pdf-viewer-wrapper">
        <pdf-viewer [src]="'pdf-link'"
                    fit-to-page="true">
        </pdf-viewer>
      </div>
    </div>
  </div>

and the css:

.bordered-content {
  width: 100%;
  border: 1px solid $light-color;
  border-radius: 10px;
  padding: 20px;
}

.pdf-viewer-wrapper {
  height: 100%;
  overflow-y: scroll;
  background-color: red;
}

However, with this setup, the pdf-viewer wrapper doesn't seem to obey the height: 100% rule and just never shows the scroll - instead it overflows the container for as many pages as there are in the pdf.

If I change the pdf-viewer-wrapper class to :

.pdf-viewer-wrapper {
  height: 600px;
  overflow-y: scroll;
  background-color: red;
}

it suddenly starts listening to the height rule and the scroll is there. The pdf-viewer however is limited to 600px , not to the height of the parent which is not ideal.

Can you please explain to me why it's working for a fixed number of pixels for height and not for 100% ? And how to fix it?