在弹性框中为动态内容设置相同的高度

Question

在这种情况下

• 需要为所有三列保持相同的高度（这已根据当前代码工作，“。col”使用flex获得相同的高度）
• 需要为所有黄色设置黄色div的最大高度（动态内容） 格
• 需要使用CSS（不是JavaScript）
来实现
• 使用flex（不是表格）

这是测试代码jsfiddle

当前设计 需要设计

我在“底层内容”区域内有动态内容。我需要做的是，将所有“底部内容”区域设置为相同的高度（设置3个黄色区域的最大高度），并且所有“col”也应该是相同的高度。

HTML代码

<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代码

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