How to automatically adjust row height in Bootstrap? - html

Question

I'm learning Bootstrap and I'm trying to figure out how to automatically adjust a rows height given this conditions:
There are 3 rows within a container-fluid
row1 must adjust to the height of its content
row3 must adjust to the height of its content and be at the bottom of the viewport
row2 should adjust its height to the space between row1 and row3 to fill the container-fluid
html, body, .container-fluid {
height: 100%;
background: lightyellow;
}
.col {
border: solid 1px #6c757d;
}
.content-1 {
height: 50px;
background-color: lightcoral;
}
.content-2 {
height: 200px;
background-color: lightgreen;
}
.content-3 {
height: 25px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="content-1">
ROW 1 -> Height of its content
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-2">
ROW 2 -> Height between row1 and row3 automatically adjusted
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-3">
ROW 3 -> Height of its content
</div>
</div>
</div>
</div>
JSFiddle demo
What would be the best approach to do so?. Thank you in advance!

Answer 1

You're looking for the flexbox utility classes. d-flex is for display:flex, and flex-grow-1 will make the 2nd child div fill the remaining height. Use flex-column as you want a vertical layout.
<div class="container-fluid d-flex flex-column">
<div class="row">
<div class="col">
<div class="content-1">
ROW 1 -> Height of its content
</div>
</div>
</div>
<div class="row flex-fill">
<div class="col d-flex flex-column">
<div class="content-2 h-100">
ROW 2 -> Height between row1 and row3 automatically adjusted
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-3">
ROW 3 -> Height of its content
</div>
</div>
</div>
</div>
https://www.codeply.com/go/IIVJqGJ2qG
Note: The fixed heights set in the custom CSS have been removed to allow the header/footer to be the height of their content, and the content row to fill the remaining height.
Related:
Bootstrap 4: How to make the row stretch remaining height?
Bootstrap - Fill fluid container between header and footer

Answer 2

I see you use bootstrap 4. But anyone who use bootstrap 3 or not at all using any CSS libraries, then the solution would be the code below.
.parent-row{
display: flex;
}
.children-columns{
display: flex;
}