Set same height in flex-box for dynamic content - html

Question

In this case
need to keep same height for all three columns (this is working already according to current code, ".col" get same height using flex)
need to set max height of yellow div (dynamic content) for all yellow
div
need to be implement using CSS only (not JavaScript)
use flex (not tables)
here is test code jsfiddle
Current Design
Need Design
I have dynamic content inside the "bottom-content" area. what I need to do, set all "bottom-content" area same height (set max height for 3 yellow areas), and all "col" should be same height too.
HTML code
<div class="container">
<div class="col">
<div class="top-content">top content here</div>
<div class="bottom-content">bottom content here</div>
</div>
<div class="col">
<div class="top-content">top content here</div>
<div class="bottom-content">bottom content here</div>
</div>
<div class="col">
<div class="top-content">top content here</div>
<div class="bottom-content">bottom content here</div>
</div>
</div>
CSS code
.container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
overflow: hidden;
}
.container .col {
flex: 1;
padding: 20px;
}
.container .col:nth-child(1) {
background: #eee;
}
.container .col:nth-child(2) {
background: #ccc;
}
.container .col:nth-child(3) {
background: #eee;
}
.top-content {
background: #888;
border-bottom: 1px solid #333;
padding: 5px;
}
.bottom-content {
background: yellow;
padding: 5px;
}