How to make ion-card with fixed ion-card-header and scrollable ion-card-content?

Like the question, I need to make my ion-card scrollable with the ion-card-header fixed, something like what happens to ion-header and ion-content.

I put this css code for my page:

ion-card{
        height: 80%;
        width: 100%;
        overflow: scroll;

        ion-card-header{
            margin-bottom: 10px;
        }

and my ion-card is now scrollable, but the ion-card-header is scrollable too, and I want it to be fixed on top of the card when I scroll down.

I also tried to add on ion-card-header css block "position: fixed" or "position: sticky" but nothing changes.

I can't find any solution trought internet, can anyone help?

If I've understood your question correctly, you want to have a card with a fixed header and the content to scroll.

This won't happen with your CSS because you are applying overflow: scrollable to the entire ion-card element. You need to separate them out.

So you should end up with something similar (refactor as you see best) to:

ion-card {
   height: 80%;
   width: 100%;
}

ion-card > ion-card-content {
   height: 150px; //your height of content here
   overflow: scroll;
}

You won't need to apply a fixed property to the header as it should remain fixed by default.