CSS: how to have text that takes 100% of a container respecting another container height?

Question

Hello I have a problem that is quiet specific that I can't resolve:

I have two containers (ion-card to be specific) and I want the two containers to be the exact same heigth all the time. I managed to do that by following this answer here :

The problem is, as you can see, that the text on the left isn't taking all the height of the card and that's not pretty. I tried to increase font-size but by doing that the problem stay the same because the right part will in turn too big compare to the left size (the ion-card will increase in height but not the images).

I addition, the text is in fact from another component (I don't know if it's part of the problem of not).

Here is the ionic code :

<ion-grid>
<div class="card-height">
  <ion-row>
    <ion-col>
      <ion-card>
        <ion-card-header>
          <ion-card-title class="card-header">Test  </ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <!-- The componenent that contain the text -->
          <app-results></app-results>
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-header>
          <ion-card-title class="card-header">Galerie </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <hr />
          <hr />
          <ion-grid>
            <ion-row>
              <ion-col><img src="assets/profil_image.png"/></ion-col>
              <ion-col><img src="assets/profil_image.png"/></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
            </ion-row>
            <ion-row>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
            </ion-row>
            <ion-row>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
            </ion-row>
          </ion-grid>
          <div style="text-align: center">
            <ion-button
              style="width: 200px"
              color="medium"
              fill="outline"
              shape="round"
              >Devenir V.I.P</ion-button
            >
            </div>
          </div>
          <ion-item lines="none">
            <ion-icon
              slot="end"
              name="pencil-outline"
              class="pointer"
            ></ion-icon>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</div></ion-grid>

Here is the scss :

.card-height {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  ion-col {
    display: flex;
    justify-content: center;
  }
  ion-card {
    width: 100%;
  }
}

The app-result component :

<div *ngFor="let item of uniqueResults">
    <ion-text
      [ngClass]="{
              'result-100': item?.average >= 75 ||  item?.average >= 100,
              'result-90': item?.average >= 62 ||  item?.average >= 74,
              'result-80': item?.average >= 6 ||  item?.average >= 61,
              'result-70': item?.average >= 0 ||  item?.average >= 5}"
      >{{item?.role}} - {{item?.average }} %
    </ion-text>
    <br />
  </div>
  <div style="text-align: center">
    <ion-button
      style="width: 200px"
      color="medium"
      fill="outline"
      shape="round"
      [routerLink]="['/test']"
    >
      Test
    </ion-button>
  </div>

Answer 1

It looks like you haven't actually set a height for ion-card, so naturally it is defaulting to the height of the content within the ion-card.

Try setting a height: /* my height */;, or better still a min-height: /* my height */;. You may need to set new heights for certain devices using @media screen and (max-width:770px) { /* code here */ }

Note that this would only set the containers height. If you are wanting to spread the text so it uses the full height of the container, then realistically you need to resize the text depending on the containers size.