1

The following threads were not helping with my situation:

How to make bootstrap column height to 100% row height? [duplicate]

CSS - div extend height to match sibling

Make a div fill the height of the remaining screen space

I am populating the column's content by a for loop and I don't know the height for the column with the highest content.

I want to make the sibling columns to automatically fit to the highest column height and within the column it has a few rows of data where I would want them to have equal height as well when they are being stretched to fit the highest column.

How can I achieve this?

Here's a sample picture for my current situation:

description

Essentially, I want to achieve the following:

despcription2

Here's my component.html:

<div class="container">
    <div class="row">

        <div class="col-4">
            <div *ngFor="let element1 of level1" style="min-height: 20px; border: 1px solid black;">
                {{element1}}
            </div>
        </div>

        <div class="col-4">
            <div *ngFor="let element2 of level2" style="min-height: 20px; border: 1px solid black;">
                {{element2}}
            </div>
        </div>

        <div class="col-4">
            <div *ngFor="let element3 of level3" style="min-height: 20px; border: 1px solid black;">
                {{element3}}
            </div>
        </div>

    </div>
</div>

and my componenet.ts where I'm instantiating the string array to populate my column:

export class AppComponent {
  name = "Angular";
  level1: string[] = ["1A"];
  level2: string[] = ["2A", "2B", "2C"];
  level3: string[] = ["3A", "3B", "3C", "3D", "3E"];
}

I tried setting max-height: fit-content to my row and height: 100% to my content <div> but it didn't work.

kaiilim
  • 579
  • 12
  • 31

1 Answers1

1

I think you can achieve this by using flexbox, by adding the following css:

.row {
  display: flex;
}

.col-4 {
  display: flex;
  flex-direction: column;

  > div {
    flex-grow: 1;
  }
}

flex-grow will make sure the elements will fill up the remaining heights. so add this to all the div elements, and they will behave as you want them to

Ramon
  • 36
  • 3