I have two columns in a row. The left columns has a fixed height given by the content it holds height:auto. The right column is longer than the left column. How can I overflow the right column once it reaches the height of the left column?
I already tried to give the right column overflow-y: scroll; max-height: 200px;. But I want the right column to automatically adjust to the left column, without specifying a length-based height.
I also created a JSFiddle with my problem here.
I am using Bootstrap 4.6.0 in my Angular project.
My HTML code currently looks like this:
<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>
I don't think that a pure css method is possible here. You can do this quite simply using Javascript. Just get the height of the left column and set the right column to it's height.
Working Fiddle: https://jsfiddle.net/036v75ap/6/
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col" id="left-col" style="background-color:blue">
<p>some content in the left column</p>
<p>some content in the left column</p>
<p>some content in the left column</p>
</div>
<div class="col" id="right-col" style="background-color:red">
<p>some content in the right column</p>
<p>some content in the right column</p>
<p>some content in the right column</p>
<p style="background-color:green">this should be in the overflow</p>
<p style="background-color:green">this should be in the overflow</p>
<p style="background-color:green">this should be in the overflow</p>
<p style="background-color:green">this should be in the overflow</p>
</div>
</div>
</body>
#left-col {
height: fit-content;
}
#right-col {
overflow-y: scroll;
}
$(document).ready(function(){
let height = $('#left-col').css('height');
$('#right-col').css('height', height);
})