使 Flex 子项的高度等于网格列内父项的高度

我正在尝试构建一个定价表，其中每列都包含一张卡片。我希望所有卡片都拉伸到其父 (.col) 元素的高度。

注意：我正在使用 Bootstrap 4，并尝试使用现有的网格系统来实现这一点（为了保持一致性）并使用这个特定的标记。我无法让卡片增长到其父容器的高度。在当前的标记下这是否可能？

基本标记是这样的：

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

这是我的笔：https://codepen.io/anon/pen/oZXWJB https://codepen.io/anon/pen/oZXWJB

Add flex-grow : 1;给你的.card规则。 HTML 标记很好。

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

您还可以看看Foundation 6 均衡器 https://foundation.zurb.com/sites/docs/equalizer.html插入。但他们使用 JavaScript。