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:
Essentially, I want to achieve the following:
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.
