Bootstrap 4 flexbox content 100% height - html

Question

I Have some problems with Bootstrap 4.
I Have activated flexbox and i want content in column to be 100% height.
This is the structure:
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="content">
</div>
</div>
</div>
This is the result:
Flexbox
How can the gray background be 100% height? i tried with height: 100%. But the container will be 100% height of the page and not of the column. I also tried to set parent to relative and child to absolute. Doesn't worked.
Background color is set on content.
Codeexample:
http://jsfiddle.net/KjGZw/339/

Answer 1

You need to make the .col divs flex-containers with display:flex and apply flex-direction:column to those.
Then set the .content divs to flex:1
.row {
height: auto;
display: flex;
flex-wrap: wrap;
}
.col {
padding: 15px;
flex: 1 1 25%;
display: flex;
flex-direction: column;
}
.content {
background: purple;
color: white;
padding: 15px;
flex: 1;
}
*,
:after,
:before {
box-sizing: inherit;
}
<div class="row">
<div class="col">
<div class="content">
Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />
</div>
</div>
<div class="col">
<div class="content">
Test
</div>
</div>
<div class="col">
<div class="content">
Test
</div>
</div>
<div class="col">
<div class="content">
Test
</div>
</div>
<div class="col">
<div class="content">
Test
<br>Test
<br>Test
<br>Test
<br>
</div>
</div>
<div class="col">
<div class="content">
Test
</div>
</div>
</div>