Equal height flex items when inner content has different height - html

Question

I need columns that will have the same height, so I used flex (I use bootstrap framework).
I know that flex work can be seen in the attached picture, but the height of the boxes is not the same, by the fact that one is less text than the other.
I want class inner-div to match to the height of col-md-4.
Can someone help me adjust the height so that it is always the same?
.col-md-4 {
border: 1px solid black;
}
.row-eq-height {
display: flex;
}
.inner-div {
border: 1px solid red;
}
<div class="container">
<div class="row row-eq-height">
<div class="col-md-4">
ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>
<div class="inner-div">
adsadadadada
</div>
</div>
<div class="col-md-4">
ddddddsadddddddsadddddddsadddddddsa
<div class="inner-div">
asdadadaada
</div>
</div>
<div class="col-md-4">
ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>
<div class="inner-div">
asdadaadas
</div>
</div>
</div>
</div>

Answer 1

The problem is that .inner-div is not a flex item, so it doesn't accept flex properties.
Flex layout works only within a parent-child relationship. .row-eq-height is a flex container because you've given it display: flex. This means that .col-md-4 is a flex item, because it's the child of .row-eq-height.
Looking at your images (the highlighted section), you'll see that flex equal height columns are actually working. Each .col-md-4 container is the same height.
However, the children of .col-md-4 are not flex items. They are normal elements in a block, not flex, formatting context.
The solution is to make .col-md-4 a flex container so flex properties can be applied to .inner-div.
.row-eq-height {
display: flex;
}
.col-md-4 {
display: flex;
flex-direction: column;
border: 1px solid black;
}
.inner-div {
flex: 1;
border: 1px solid red;
}
<div class="row row-eq-height">
<div class="col-md-4">
ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>
<div class="inner-div">
adsadadadada
</div>
</div>
<div class="col-md-4">
ddddddsadddddddsadddddddsadddddddsa
<div class="inner-div">
asdadadaada
</div>
</div>
<div class="col-md-4">
ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>ddddddsadddddddsadddddddsadddddddsa
<br>
<div class="inner-div">
asdadaadas
</div>
</div>
</div>

Answer 2

It's simple.
When you want to set the inner-div's height to it's parent's height, set the inner-div to display:flex and flex-grow:1. It will take up the height of the parent.
Additionally you can set align-items: stretch to the parent div. This makes all the inner divs to stretch out to what the parent has.
Hope it works for you.

Answer 3

I think you are looking for a solution like this: https://jsfiddle.net/Lddyn573/4/
I set the height of the box-header to calc(100% -24px), 24px is the height of the bottom div.
/* CSS used here will be applied after bootstrap.css */
.col-md-4 {
border: 1px solid black;
padding: 10px;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.box-header{
height: calc(100% - 24px);
border: 1px solid green;
}
.box-content {
border: 1px solid red;
}