How to limit Bootstrap 4 column height to another columns height?

user_8301665 0
Viewed 415

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.

Here is my current situation

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>
angular-ui-bootstrap bootstrap-4 css html
2 Answers

If you want the right column to dynamically have the same height as the left column, then you probably thinking use some JS or JQuery help.

See the snippet below:

var leftHeight = document.getElementById('left-col').clientHeight;
document.getElementById('right-col').style.height = leftHeight + 'px';
#right-col {
  overflow: scroll;
}
.col {
    height: fit-content;
}
<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>

user_159009940

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);
})
user_75757960
Related