使滚动成为元素的最佳方法

Question

我在一个元素中创建滚动，为此我尝试过：

 .scroll-content {
    overflow: hidden;
 }
    
.scrollabe {
  overflow-y: scroll;
}

<ion-content>
  <ion-grid style="height:100%" *ngIf="plat && ticket">
    <ion-row>
      <ion-col col-4 padding>
        <ticket-info [ticket]="ticket"></ticket-info>        
      </ion-col>
      <ion-col class="scrollabe" col-8 no-margin>
          <ticket-acao [ticket]="ticket"></ticket-acao>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

但这隐藏了我的内容： My element

另外，我试过这样：

.scroll-content {
  overflow: hidden;
}

 <ion-content>
  <ion-grid *ngIf="plat && ticket">
    <ion-row>
      <ion-col col-4 padding>
        <ticket-info [ticket]="ticket"></ticket-info>        
      </ion-col>
      <ion-col col-8 no-margin>
        <ion-scroll scrollY="true" style="height: 100%;width: 100%">
          <ticket-acao [ticket]="ticket"></ticket-acao>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

同样的问题发生了......

如果我降低高度，问题就解决了，但我失去了响应式布局。

那么，最好的方法是什么？

Answer 1

删除 style="height: 100%" 以及您在其中声明的两个 CSS 规则。如果ion-grid 溢出，ion-content 组件将为您执行滚动。