15

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>

Colorful row example

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?

d0x
  • 11,040
  • 17
  • 69
  • 104

1 Answers1

22

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: solution

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

d0x
  • 11,040
  • 17
  • 69
  • 104
  • 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. – d0x Dec 05 '18 at 18:21
  • Salutes to you for not keeping the answer to yourself but putting it out there. – jiroch Feb 08 '21 at 09:40