Невозможно прокрутить html

Question

Это ссылка моего веб-сайта. CSS, который я использую, взят с этого веб-сайта . Однако моя веб-страница не прокручивается, и мой код выглядит следующим образом:

<div> 
  <ion-grid class="container separator" *ngIf="historyList?.length > 0; else noItems">
    <ion-row style="clear:both;" class="progress-tracker progress-tracker--vertical" >
      <ion-col class="progress-step is-complete" *ngFor="let item of historyList; let i = index">
        <div class="progress-marker"></div>
        <div class="progress-text">
          <h5 class="progress-title">{{item.message}} </h5>
          <h6>by {{item.issuer}}</h6>
          <small>{{item.issueOn}}</small><br>
          <ion-button (click)="verifyCert(i)" size="small">Verify</ion-button>
        </div>
      </ion-col>
    </ion-row>        
  </ion-grid>
</div>

Я пробовал:

clear:both;
overflow: scroll;
position: relative;

, но все еще не прокручивается

Вот изображение моего интерфейса интерфейса

Answer 1

Я проверил код на вашем веб-сайте ioni c и, насколько я понимаю:

у вас ion-grid завернутый внутрь div

<div>
<ion-grid> ...</ion-grid>
</div>

замените свой div на ion-content, прокрутка будет работать для вас.

<ion-content>
<ion-grid> ...</ion-grid>
</ion-content>

Answer 2

Самый простой путь, который я вижу, - это добавить класс в родительский div следующим образом:

<div class="scroll"> 
  <!-- Inner Content --/>
</div>

А затем добавить в свой CSS:

.scroll {
   overflow:auto;
}

По крайней мере это работает в Chrome с инструментами разработки: