Stretch column to fill remaining row height [duplicate] - html

Question

This question already has answers here:
Bootstrap 4 row fill remaining height
(3 answers)
How to make the row stretch remaining height
(1 answer)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Flexbox - Fill remaining space [duplicate]
(3 answers)
Flexbox fill available space vertically
(2 answers)
Closed 3 years ago.
So I've been looking around for a solution to this and I cannot find one anywhere.
I've tried flex-grow: 1;, align-self: stretch; and a few other flexbox properties but none seem to do the trick.
I would like to get the last column to stretch and take up the remaining height from the row.
Following what everyone has said I've made some adjustments, still not quite what I need it to be however.
(The blue box is what I want to stretch)
View the below snippet:
.product {
border: 1px solid rgba(0,0,0,.2);
padding: 15px;
height: 100%;
}
.product .image {
padding-bottom: 100%;
background: rgba(255,0,0,.2);
margin-bottom: 15px;
}
.product .content {
border: 1px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-4">
<div class="product">
<div class="image"></div>
<div class="content">
The height of this is dynamic.
</div>
</div>
</div>
<div class="col-4">
<div class="product">
<div class="image"></div>
<div class="content">
It can vary from product to product, but I would like this class to stretch.
</div>
</div>
</div>
<div class="col-4">
<div class="product">
<div class="image"></div>
<div class="content">
To fill the rest of the columns height.
</div>
</div>
</div>
</div>
</div>

Answer 1

I did this on jsfiddle https://jsfiddle.net/e4sufy7k/1/
I remove your inner row and col and add height: 100% to your .card .body. Is it what you expected ?
.card {
border: 1px dashed red;
border-radius: 0;
background: #000 !important;
color: #fff;
}
.card .head {
border: 1px solid blue;
padding: 15px;
}
.card .body {
padding: 15px;
border: 1px dashed #000;
background: #fff;
color: #000;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-4 card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="body">
This should match the height of the talest card.
</div>
</div>
<div class="col-4 card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class=" body">
Stretch me please!
</div>
</div>
<div class="col-4 card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="body">
I should be dynamic and stretch to fill the rest of the column!
</div>
</div>
</div>
</div>
</div>

Answer 2

You have to put your card div inside col-4, and stretch it to 100%, to ensure it will be the same size as the parent. After that, just set the height of body also to 100%.
Like that:
<div class="container">
<div class="row">
<div class="col-4">
<div class="card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="body">
This should match the height of the tallest card.
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="body">
Stretch me please!
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="body">
I should be dynamic and stretch to fill the rest of the column!
</div>
</div>
</div>
</div>
</div>
And style like that:
.card {
border: 1px dashed red;
border-radius: 0;
background: #000 !important;
color: #fff;
height: 100%;
}
.card .head {
border: 1px solid blue;
padding: 15px;
}
.card .body {
padding: 15px;
border: 1px dashed #000;
background: #fff;
color: #000;
width: 100%;
height: 100%;
}

Answer 3

In Bootstrap, .row is the flex-box container, so only the immediate children (.cols) can interact with each other. In your example, the col items you want stretched are not siblings of each other so they cannot get the stretch applied compared to each other.
The .card elements are siblings of a .row so they do get the applied effect.
To get the .cols you want to streach, they need to be siblings.
<style>
.card-head {
border: 1px solid blue;
background: #000;
color: #fff;
padding: 15px;
}
.card-body {
padding: 15px;
background: #fff;
color: #000;
border: 1px solid red;
}
</style>
<div class="container">
<div class="row no-gutter">
<div class="col-4 card-head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="col-4 card-head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="col-4 card-head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
</div>
<div class="row no-gutter">
<div class="col-4 card-body">
This should match the height of the talest card.
</div>
<div class="col-4 card-body">
Stretch me please!
</div>
<div class="col-4 card-body">
I should be dynamic and stretch to fill the rest of the column!
</div>
</div>
</div>
Alternatively, you can leave your html markup the way you have it and use styles to make it appear as you want. If you move the background and color styles of .card to .head it will appear as you want.
.card {
border: 1px dashed red;
border-radius: 0;
.head {
border: 1px solid blue;
background: #000;
color: #fff;
padding: 15px;
}
.body {
padding: 15px;
background: #fff;
color: #000;
}
}

Answer 4

Ok so I was able to fix this by adding:
display: flex;
flex-direction: column;
To my .product class and putting:
flex-grow: 1;
On my .content class.
Thanks everyone for your help! :)