flexbox粘性页脚

我正在努力实现与该问题中描述的内容大致相同的内容:

I'm trying to achieve more or less the same of what is described in this question:

• 使用flexbox将元素与底部对齐

除了我不能使用固定的高度.

except for the fact that i can't use fixed heights.

我有两张已经在flex上下文中的卡(它们的高度已通过flexbox拉伸):

I have set of two cards that are already in a flex context (their heights are stretched with flexbox):

在卡片内，我具有一系列要素:

Inside the card I have a series of elements:

• 标题
• 身体
• 页脚(蓝色div)

我想要的是页脚始终固定在底部.

What I want is the footer to always stick to the bottom.

上述三个元素的内部容器具有以下CSS:

The inner container of the three elements described above have the following CSS:

.card-inner {
  display:flex;
  flex-flow :row wrap;
  align-items: stretch;
}

和里面的物品有

.card {
  &-header,
  &-body {
    flex: 0 1 100%;
  }
  &-footer {
    flex: 0 1 100%;
    align-self:flex-end;
    margin-top: auto;
  }
}

我希望align-self:flex-end或margin-top: auto会将页脚div向下推到卡上，但这没有发生.

I would have expected that align-self:flex-end or margin-top: auto would have pushed the footer div down the card, but this is not happening.

也许这两个flex上下文互不互斥且互不相关?还是在内部容器没有高度的情况下，当内容流结束时，flex上下文结束了吗?

Maybe the two flex contexts don't speak to each other and are not related? Or maybe without a height to the inner container, the flex context ends when the content flow ends?

有没有办法在Flexbox中不使用高度来实现这一目标?

Is there a way to achieve this using no heights with flexbox?

这是一个Codepen示例: https://codepen.io/vlrprbttst/pen/QgWbEr

Here's a codepen example: https://codepen.io/vlrprbttst/pen/QgWbEr