How to scroll an ion-card-content without setting height of parent

Question

I'm getting an issue with scroll in ionic 4 and angular 7.

I have the following structure:

<ion-grid>
    <ion-row>
      <ion-col>
       <ion-card>
        <ion-card-header>
         <!-- some content -->
        </ion-card-header>
        <ion-card-content>
         <ion-list>
          <!-- some ion-item -->
         </ion-list>
        </ion-card-content>
       </ion-card>
      </ion-col>

      <ion-col>
      </ion-col>
    </ion-row>
</ion-grid>

I apply a scroll on my ion-card-content with this following scss code :

ion-card-content {
  max-height: calc(100% - #{50px});
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}

If I apply the following scss code on my ion-card the scroll will not work:

ion-card {
  max-height: 100%;
}

If I apply the following scss code on my ion-card the scroll works but the size of ion-card is still the same, and when I have no ion-item in my ion-list it takes all the screen :

ion-card {
  height: 100%;
}

Do you know any way to perform the scroll and keep an height that will size according to the ion-list size ?

Answer 1

I solved the problem by setting the following css code on my ion-card :

ion-card {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

I also removed the ion-card-content element, and apply the following css code on the ion-list :

ion-list {
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}