I currently have a layout with two columns in a row. The left column has a fixed height determined by its content (height:auto), while the right column is longer and may overflow once it reaches the height of the left column. How can I make sure the right column overflows appropriately without setting a specific height?
I've already attempted to use CSS properties like overflow-y: scroll and max-height: 200px on the right column, but I want it to adjust dynamically based on the content of the left column.
You can view my current setup here.
To better illustrate the issue, I've created a JSFiddle that you can access here.
For this project, I'm utilizing Bootstrap 4.6.0 within an Angular environment.
Here's a snippet of the HTML code I'm currently working with:
<div class="row justify-content-center">
<div class="col">
<mat-list role="list">
<mat-list-item role="listitem">STATUS: {{statusText}}</mat-list-item>
<mat-list-item role="listitem">UserId: {{character?.userId}}</mat-list-item>
<mat-list-item role="listitem">CharacterId: {{character?._id}}</mat-list-item>
<mat-list-item role="listitem">Gender: {{character?.gender}}</mat-list-item>
<mat-list-item role="listitem">Region Id: {{character?.regionId}} </mat-list-item>
<mat-list-item role="listitem">
Region name: {{region?.name}}
<button mat-raised-button color="primary" [routerLink]="['/regions', character?.regionId]">Overview</button>
<button mat-raised-button color="primary" (click)="goToMap(character?.regionId)">Show on Worldmap</button>
</mat-list-item>
<mat-list-item role="listitem">City Id: {{character?.cityId}} </mat-list-item>
<mat-list-item role="listitem">City name: {{city?.name}}</mat-list-item>
<mat-list-item role="listitem">HP: {{character?.hp}}</mat-list-item>
<mat-list-item role="listitem">Strength: {{character?.strength}}</mat-list-item>
<mat-list-item role="listitem">Agility: {{character?.agility}}</mat-list-item>
<mat-list-item role="listitem">Intelligence: {{character?.intelligence}}</mat-list-item>
</mat-list>
</div>
<div class="col">
<div class="row limit">
<mat-card *ngFor="let log of logs" style="margin-top:10px; width:100%">
<div class="row">
<mat-card-header>
<mat-card-title>{{log.action}}</mat-card-title>
<mat-card-subtitle>{{log.objectId}}</mat-card-subtitle>
</mat-card-header>
</div>
</mat-card>
</div>
<div *ngIf="logsCurrentPage > 1" class="row justify-content-center">
<button class='btn-margin' mat-raised-button color="secondary" (click)='loadNextLogPage()'>Load more</button>
</div>
</div>
</div>