How to make ng2-pdf-viewer height responsive in angular?

Question

I am working on an Angular 19 project and have created a card component using Angular Material to display information about brochures. Inside this card, I need to display the first page of a PDF using the pdf-viewer component from ng2-pdf-viewer.

The issue I'm facing is with responsiveness:

If I set the height of the pdf-viewer to auto, the content is not displayed at all. If I set a static height, the content is shown, but the design becomes non-responsive and doesn't adapt to different screen sizes. I need the pdf-viewer to dynamically adjust its height based on its content while remaining fully responsive to screen size changes.:

Here’s the HTML template for the card component:

<mat-card class="brochure-card">
        <mat-card-content>
            <div class="brochure-content">
                <pdf-viewer
                    id="card-pdf-viewer"
                    [src]="brochurePdfUrl"
                    [render-text]="false"
                    [page]="1"
                    [zoom-scale]="'page-fit'"
                    [show-all]="false"
                    [rotation]="0"
                    [original-size]="false"
                    [autoresize]="true"
                    class="pdf-viewer"
                    (click)="openModal()"
                >
                </pdf-viewer>
            </div>
        </mat-card-content>
        <hr class="divider" />
        <mat-card-footer class="d-flex justify-content-between align-items-center">
            <div class="ms-2">
                <mat-card-title class="mb-0">{{ brochureTitle }}</mat-card-title>
                <p class="text-muted">Active: {{ activeDate }}</p>
            </div>
            <button class="btn btn-outline-danger mb-2 me-2">
                <i class="bi bi-heart"></i>
            </button>
        </mat-card-footer>
    </mat-card>

And here is the scss styles for that component:

.brochure-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .pdf-viewer {
        height: auto;
        min-height: 400px;
        overflow: hidden;
    }

    .mat-dialog-container {
        padding: 0px !important;
    }

    mat-card-content {
        height: 100%;
    }

    .mat-dialog-container {
        padding: 0px !important;
    }

What I tried:

1. Setting height: auto for the pdf-viewer, which causes the PDF content not to render.
2. Adding a min-height to the pdf-viewer, but this doesn't make it responsive on smaller screens.
3. Using [autoresize]="true" in the pdf-viewer options, but it did’t resolve the issue.