Bootstrap 4 row fill remaining height
Use the Bootstrap 4.1 flex-grow-1 class...
https://codeply.com/go/Iyjsd8djnz
html,body{height:100%;}
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 bg-red">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-purple">
<div class="text-white">
<div style="height:150px">ROW 1 - fixed height</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">ROW 2 - grow remaining height</div>
</div>
</div>
</div>
<div class="col-8 bg-gray"></div>
</div>
</div>Update 4.3.1: Another example using the vh-100 utility class
https://codeply.com/go/h3bZbM6eSS
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row justify-content-center min-vh-100">
<div class="col-4 bg-red">
<div class="d-flex flex-column h-100">
<div class="row justify-content-center bg-purple">
<div class="text-white">
<div style="height:150px">ROW 1 - fixed height</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">ROW 2 - grow remaining height</div>
</div>
</div>
</div>
<div class="col-8 bg-gray"></div>
</div>
</div>Related: How to make the row stretch remaining height
This is a solution. The wrapper div has to have h-100, the div that adapts to height has to have flex-grow-1 and overflow-auto. This way, the div will grow to fill the space when its content is minor than the available space and will show the scrollbar when its content is higher than the available space.
Demo jsfiddle
<div class="h-100 d-flex flex-column bg-yellow px-2">
<div class="flex-column justify-content-center bg-purple px-2">
<div class="text-white p-0" style="height:50px">HEADER</div>
</div>
<div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">
<div>Item1</div>
<div>Item2</div>
INNER text 1<br>
INNER text 2<br>
</div>
<div class="flex-column justify-content-center bg-darkblue px-2">
<div class="text-white p-0" style="height:50px">FOOTER</div>
</div>