Position: sticky doesnt work for element inside <ion-item>

I have implemented a table, which is very wide (much wider than the screen), and the user can scroll horizontally.

At the far left, is a task-row component which has an element with a “sticky” header (.task-row_main class), which doesnt move when scrolling horizontally, by using the css `position: sticky .

.task-row_main {
    display: flex;
    align-items: center;
    max-width: 230px;
    flex-shrink: 1;
    flex-grow: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 1px;
}

When I add my task-row component into ion-item , the sticky header breaks, and I cannot figure out how to get around this.

<ion-item>
    <task-row>
    </task-row>
</ion-item>

How do I make it so that position: sticky works for element inside an <ion-item>?