Html полоса прокрутки карты

Question

Я работаю над приложением angular, и в пользовательском интерфейсе есть несколько блоков .card, но когда я продолжаю добавлять их в Html, они исчезают в нижней части страницы, и я ожидал, что, когда я продолжайте добавлять их, на странице появится полоса прокрутки, может кто-нибудь помочь мне с этим?

<div class="content-area">
<div class="clr-row">
    <div class="clr-col-12">
        <div class="card">
            <div class="card-block">
                <div class="card-title" *ngIf="project">
                    <app-shr-project-header [project]='project'></app-shr-project-header>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clr-row" style="margin-top: 24px;">
    <div class="clr-col-12">
        <app-submission-review-grid></app-submission-review-grid>
    </div>
</div>
<div class="clr-row">
    <div class="clr-col-12">
        <div class="card">
            <div class="card-block">
                <div class="card-title">
                    <h4>
                        Information Requests
                    </h4>
                </div>
                <div class="card-text">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clr-row">
    <div class="clr-col-12">
        <div class="card">
            <div class="card-block">
                <div class="card-title">
                    <h4>
                        Attachments
                    </h4>
                </div>
                <div class="card-text">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>
</div>

main-container находится в другом компоненте

<div class="main-container">
  <app-navbar></app-navbar>
  <router-outlet></router-outlet>
</div>

Answer 1

Хорошо, хотя у моего app.component уже есть class="main-container, добавив еще один к этому Html, также я пропустил class="content-container", с этими двумя теперь работает

<div class="main-container">
<div class="content-container">
    <div class="content-area">
        <h1>
            SHPO Response
        </h1>
        <div class="content-area">
            <div class="clr-row">
                <div class="clr-col-lg-12">
                    <div class="card mt-0">
                        <div class="card-block">
                            <div class="card-title" *ngIf="project">
                                <app-shr-project-header [project]='project'></app-shr-project-header>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="clr-row" style="margin-top: 24px;">
                <div class="clr-col-12">
                    <app-submission-review-grid></app-submission-review-grid>
                </div>
            </div>
            <br>
            <div class="clr-row">
                <div class="clr-col-lg-12">
                    <div class="card mt-0">
                        <div class="card-block">
                            <div class="card-title">
                                <h4>
                                    Information Requests
                                </h4>
                            </div>
                            <div class="card-text">
                                ...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="clr-row">
                <div class="clr-col-lg-12">
                    <div class="card mt-0">
                        <div class="card-block">
                            <div class="card-title">
                                <h4>
                                    Attachments
                                </h4>
                            </div>
                            <div class="card-text">
                                ...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>