Adjusting the grid when viewing portrait vs landscape

[arlevi]

Can someone help me understand the grid ?
I’m not sure why I am unable to make the design I want, I’m missing some concept probably.

Suppose to be very simple,

Landscape view ( & desktop screens ):

• There should be an image spanning 10 columns
• List of images on the side the main image at the top spanning 2 columns ( 1 rows ).
  that list should be scrollable when reaching the 100% of the screen’s height ( including the navbar )

Portrait view:

• There should be an image spanning 12 columns
• List of images below the main image at the top spanning 12 columns ( 2 rows basically ).
  that list should be scrollable when reaching the 100% of the screen’s height ( including the navbar )

And the code is:

<ion-grid no-padding>

    <ion-row>
        <ion-col col-10>            
            col 1 <br />
            col 2 <br />
            col 2 <br />col 2 <br />
            col 2 <br />
            col 2 <br />
            I'm not sure why the height of the entire is being determined by  <br />
            the height of this specific column.

            This column make the next column being cut-off ( with scroll bars )
            
        </ion-col>

        <ion-col col-2>
            <ion-header>
              <ion-navbar>
                <ion-title> because I want the back button, but only in this column</ion-title>
              </ion-navbar>
            </ion-header>

            <ion-content>
                <ion-card>
                    <ion-img width="100%" height="120" src="..."></ion-img>
                    <div class="card-title"> some title </div>
                </ion-card>

                <ion-card>
                    <ion-img width="100%" height="120" src="..."></ion-img>
                    <div class="card-title"> some title </div>
                </ion-card>
            </ion-content>
        </ion-col>

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

This is the current result - why the second column doesn’t stretch to the content ?

[arlevi]

OK, not sure if it’s the right approach, but I just forced all tags to have 100% height in my scss file of the component.

    ion-grid,
    ion-row,
    ion-col {
        height: 100%;
    }

What do you think ? how bad is it ?