在 V-Card 中使用 V-flex 未按预期工作

Question

所以我一直试图在 vuetify 中创建一个具有特定布局的 V-Card。卡片顶部的大小会有所不同，因此我需要能够将卡片的底部与底部对齐。

所以我尝试在这里执行以下代码，它应该允许第一部分“增长”以填充高度，然后第二部分“缩小”并保持在底部......

但是，没有成功。我可能只是在这里做错了什么，但我正在拔头发...

这是我的代码：

<v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
  <v-layout column>
    <v-flex grow>
      {{ skinName }}
      <v-img :src="skinImage" />
    </v-flex>
    <v-flex shrink>
      <v-chip
        class="ma-2"
        color="indigo"
        text-color="white"
      >
        <img height="10px" src="~static/logo-icon.png"> {{ priceInCoins | decimalPlace }}
      </v-chip>
    </v-flex>
  </v-layout>
</v-container>

从我的图片中可以看出，无论上面的文字有多大，蓝色的“硬币”都应该在底部对齐在同一个位置！

如果您需要更多信息，请告诉我。

Answer 1

您的容器没有填满卡片的高度，因此弹性盒没有“空白空间”可以重新分配。您可以在布局和容器元素上使用fill-height 属性来确保它可以伸展。