Ionic 4 ion-row fill remaining height

Question

How to annotate an ion-row so that it fills the remaining space?

For the following example the yellow row "Content" should expand until all the remaining (green) space is taken.

<ion-grid style="background-color: green; height: 100%;">
  <ion-row>
    <ion-col text-center style="background-color: purple;">
      <p>Example text</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: yellow">
      <p>Content</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: blue;">
      <p>Example text</p>
    </ion-col>
  </ion-row>
</ion-grid>

A similar question was asked for Bootstrap and got solved with flex-grow. See: Bootstrap 4 row fill remaining height

But can we stretch the row while sticking to th row/col syntax and not introduce more flexboxes?

Solution

It is possible to annotate the grid container with display: flex; flex-flow: column and the stretching row with flex-grow: 1.

<ion-grid style="background-color: green; height: 100%; display: flex; flex-flow: column;">
  <ion-row>
    <ion-col text-center style="background-color: purple;">
      <p>Example text</p>
    </ion-col>
  </ion-row>

  <ion-row style="flex-grow: 1;">
    <ion-col text-center style="background-color: yellow">
      <p>Content</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: blue;">
      <p>Example text</p>
    </ion-col>
  </ion-row>
</ion-grid>

Then it will look like this:

When the grid compressed (instead of stretched), the rows are moving inside each other. To prevent this use flex-shrink: 0; on every row.

Comments

[d0x]

In case they are better ways of doing it, I would be happy to upvote/accept those. Because my solution is putting a display:flex onto the grid.

[jiroch]

Salutes to you for not keeping the answer to yourself but putting it out there.