Components overlap


I’m having an issue with the ion-content/ion-list in my application.
I have the following components:

Div2 (which contains an array “items” with 30 numbers):

And I include the components in a page called “home” with:

  <app-div1 style="width:100vw;"></app-div1>

The homepage is loaded in the app.component.html with the ion-router-outlet.

My functional goal is to have a page, where the user sees a tab and a list with a button:

Both div components should be fixed, while the list in div2 should be scrollable.

I’ve tried to put ‘ion-list’ in div2.component in an ‘ion-content’, but then the ion-content will use 100vh and the last items of the array are off-screen. Also, if I read the documentation correctly, the ion-content should only be used once per view. This means that I should not use it per component (or ion-list), but per page. So I should avoid this anyway?

In the current state (which is shown in the images) the entire page is scrollable. Since I want my tab to be fixed, I tried to add slot=“fixed” to on the homepage. This causes the components to overlap.

So first, I’d like to know whether I am using any ionic components in a wrong way.
Second, I’d like to know how to achieve my functional goal. From my humble, Ionic newbie, point of view, I need to fix the overlapping issue. So that I do not abuse ‘ion-content’.
So; Why is my ‘div1’ overlapping the ‘ion-content’ when I add slot=“fixed”? How do I make ‘div1’ fixed without the components overlapping?

Hope you can help me :slight_smile:

Kind regards,