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>

You should give 100% height to all the descendent of ion-col. This answer might help you. https://stackoverflow.com/questions/67057445/css-two-columns-with-one-column-height-limited-to-anothers-content/67058699#67058699 — mahan, May 15 '21 at 10:05
Do you want the left side part texts fit the container height? — Dhana D., May 18 '21 at 02:43
does it not work to do justify-content: stretch on ion-col, and flex-grow: 1 on ion-card? — tobybot, May 21 '21 at 21:27

Valleys Group · Answer 1 · 2021-05-21T14:34:24.603

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.

score 1 · Answer 2 · answered May 22 '21 at 00:19

I would suggest you create a grid inside your <app-results></app-results> Component.. just the way you have used the grid on this page.. this will ensure that the grid coming from <app-results></app-results> take the 100% available space inside of this card..

I Don't think styling the <app-results></app-results> component on this page will give you consistent UI across all device sizes... However using grid inside of the <app-results></app-results> component will always take up 100% of the available space in the card

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

2 Answers2