将div放到底部而不重叠之前div的内容

Question

我有以下示例：

小提琴：http://jsfiddle.net/yisera/yLty3552/2/

笔：http://codepen.io/yisera/pen/KpzbQp

我有一个弹性网格，我的元素也是display:flex;。我遇到的问题是div.card有另一个div div.od-card-action，它具有该卡，评论，upvote，downvote的动作。但是，每当其中一张卡片的内容比其他卡片的内容大时，它们就会拉伸，使卡片更大，以匹配该行中最大的卡片。

这是一种理想的行为，但问题是div.od-card-action也会增长（我不希望这种情况发生）并使元素看起来像第一张卡片上显示的那样无序在小提琴中。

我试过了：

.od-card-action{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px !important;
}

但这只会使上部div的内容与actions div的内容重叠。

有没有一种方法可以让div.od-card-action一直到底，无论卡的大小如何，并保持相同的大小（例如：50px表示一个值）？

提前致谢！

修改

这是一张图片展示了我想要完成的事情：

尽管上面div的内容大小不同，看看一切都是水平对齐的？这就是我需要实现的目标。

Answer 1

将od-card-action CSS更改回：

.od-card-action{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px !important;
}

将新css添加到卡片内容

.card-content{
   margin-bottom:50px;
}

Answer 2

我意识到，由于您已经在.od-card中使用了Flexbox，因此.card-content可以设置为占用尽可能多的空间（垂直方向，因为弹性方向为column）使用：

.card-content {
  flex: 1;
}