html - 使 div 到底部而不重叠以前的 div 的内容

Question

我有以下示例:

fiddle :http://jsfiddle.net/yisera/yLty3552/2/

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

我有一个 flex 网格，我的元素也是 display:flex;。我遇到的问题是 div.card 有另一个 div，div.od-card-action 具有该卡片的操作、评论、赞成票、反对票。但是，只要其中一张卡片的内容比其他卡片大，它们就会拉伸(stretch)，使卡片变大以匹配该行中最大的卡片。

这是一个理想的行为，但问题是 div.od-card-action 也会增长(我不希望这种情况发生)并使元素看起来像乱序一样它显示在 fiddle 的第一张卡片上。

我试过:

.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 中使用了 Flexbox，因此可以将 .card-content 设置为占用尽可能多的空间(垂直，因为 flex 方向是 column) 使用:

.card-content {
  flex: 1;
}