Children of table-cell bootstrap columns not occupying full height - html

Question

I have 3 different account cards with varying content in each card. I want all the cards (which reside inside a col-md-4 class) to occupy the full height of the column.
I gathered from [this][1] thread that one way to achieve that is to use display: table. The main issue is that I have a div inside the my columns which I need to occupy the full height of the column. I set those divs to display: inline-block and height to 100% but divs seem to be behaving as if height was set to auto and not occupying full height
Here is my html:
.container {
display: table;
}
.row {
display: table-row;
height: 100%;
}
.col-md-4 {
display: table-cell;
float: none;
height: 100%;
}
.account {
background: $overlay-color;
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
height: 100%;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="account">
<h1 class="type">MINI ACCOUNT</h1>
<div class="details">
<h2 class="ad">A perfect account to start with!</h2>
<p class="detail">Spreads from 2.3 pips</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">STANDARD ACCOUNT</h1>
<div class="details">
<h2 class="ad">An ideal account for every investor!</h2>
<p class="detail">Spreads from 1.9 pips</p>
<p class="detail">Minimum deposit = $25 000</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">EXCLUSIVE ACCOUNT</h1>
<div class="details">
<h2 class="ad">An exclusive account for exclusive clients!</h2>
<p class="detail">Spreads from 0 pips</p>
<p class="detail">Minimum deposit = $50,000</p>
<p class="detail">Access to Daily Technical Analysis</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

Try with flexbox
.container {
display: table;
}
.row {
display: flex;
}
.col-md-4 {
float: none;
}
.account {
background: rgba(0, 0, 0, 0.34);
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="account">
<h1 class="type">MINI ACCOUNT</h1>
<div class="details">
<h2 class="ad">A perfect account to start with!</h2>
<p class="detail">Spreads from 2.3 pips</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">STANDARD ACCOUNT</h1>
<div class="details">
<h2 class="ad">An ideal account for every investor!</h2>
<p class="detail">Spreads from 1.9 pips</p>
<p class="detail">Minimum deposit = $25 000</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="account">
<h1 class="type">EXCLUSIVE ACCOUNT</h1>
<div class="details">
<h2 class="ad">An exclusive account for exclusive clients!</h2>
<p class="detail">Spreads from 0 pips</p>
<p class="detail">Minimum deposit = $50,000</p>
<p class="detail">Access to Daily Technical Analysis</p>
</div>
</div>
</div>
</div>
</div>