使 flex child 等于网格列内父级的高度

Question

我正在尝试构建一个定价表，其中每一列都包含一张卡片。我希望所有卡片都伸展到其父 (.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

原文由 JCraine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加 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 Equalizer 插件。他们虽然使用 JavaScript。

原文由 Sumi Straessle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您只需要在 height: 100% .card

 .card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
}

演示

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议