Set same height in flex-box for dynamic content

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;
}