CSS中如何撑起内容为空的div

问题

当制作卡片时，想要实现上面是图片或色块，下面是文字的布局，
例如：

在本例中我没有使用图片，仅仅使用div的背景颜色，由于没有图片或元素填充，很容易导致色块的高度为0，因而不显示。

解决方案

想要让元素撑起父容器，那么父容器的高度 宽度等就得是已知的值，不能是100%这类
下面贴上我的解决方案链接：https://codesandbox.io/s/purple-night-lu8wn?file=/src/components/HelloWorld.vue

<template>
  <div class="wrapper">
    <div class="card">
      <div class="card-inner"></div>
      <div class="content">i am content</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper {
  height: calc(100vh - 400px);
  border: 1px red solid;
}
.card {
  height: 100%;
  background-color: green;
  display: flex;
  flex-flow: column;
  border: 1px red solid;
}
.card-inner {
  flex: 1;
  height: 67%;
  background-color: rgb(32, 160, 255);
  border: 1px red solid;
}
.content {
  text-align:center;
}
</style>

效果如图：

总结

撑起元素 必须知道父元素的尺寸，光设置百分比是不能够起作用，会一层层找到父容器，如果最终找不到父容器的高度值，也就无法让元素撑满容器了。