How to assign different height to multiple ion-grid's?

Question

Situation: I have an Ionic/Angular app. As you can see in the attached image and Stackblitz, I have a screen consisting of ion-grid 's, one green and another red background color.

Goal: I would like to assign a percentage height to each one, for example: 70% to the green one and the rest 30% to the red one. This way, the red one part should be able to scroll to be able to read all the text. This means that the "global" scrollbar shouldn't exist, only in the red area.

What I have tried: I have tried with different ion-row 's and ion-col 's configurations, even setting the red grid to position:fixed or position:sticky , but I'm not happy with the position of the green grid, which overlaps the red one and I don't know how to put it below (vertically next to) the red one.

Stackblitz: https://stackblitz.com/edit/ionic-t8maqc

Any help would be really appreciated!

Answer 1

You can use an own style for each grid.

For example, in your html file you can have something like this:

<ion-grid class="greenGrid">
    *your code here*
</ion-grid> 
<ion-grid class="redGrid">
    *your code here*
</ion-grid>

And then in the css file for this html file, this code:

.greenGrid {
    background: green;
    height: 70%; 
}

.redGrid {
    background: red;
    height: 30%; 
}