Vue.js Vuetify Flex布局-未填充高度

我用下面的代码尝试了很多不同的选项，但是，我无法用这些来填充剩余的高度。第二个布局应该填满剩余的高度我做错了什么

<template>
  <div class="earnIndex">
    <v-container fluid fill-height>
      <v-layout row wrap>
        <v-flex
          v-for="(offer, index) in offers"
          :key="index"
          xs2
          class="pa-1"
        >
          <SiteButton
            :site-name="offer.siteName"
          />
        </v-flex>
      </v-layout>
      <v-layout column fill-height>
        <v-flex grow>
          <v-card>
            <p>
              test
            </p>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

编辑：

这是我的新代码：

<template>
  <v-layout column wrap>
    <v-flex>
      <v-layout row wrap class="red">
        <v-flex
          v-for="(offer, index) in offers"
          :key="index"
          class="pa-1"
          xs2
        >
          <SiteButton
            :site-name="offer.siteName"
          />
        </v-flex>
      </v-layout>
    </v-flex>
    <v-flex grow align-content-start>
      <v-card height="100%">
        <p>
          test
        </p>
      </v-card>
    </v-flex>
  </v-layout>
</template>

这将产生以下结果：

我想与测试卡开始后，在顶部的链接直，然后填补其余的高度

提前感谢您的帮助

问候,， Josh

尝试在右侧使用列填充高度，然后在v-flex上增长

---

在您的场景中，您不需要那么多的标记，可以将其减少到几行。 我只是在v-for中填写了一些数字，而不是您的自定义组件。 这将在for循环之后将较低的卡拉伸到最大值。v-row和v-col是2.0中现在的发展方向

---

谢谢，但是，第一个v型布局应该在第二个的顶部-这两个布局在任何一侧。您提供的代码是并排布局。你能提供包含父元素的完整代码吗？当然，但这几乎就是全部。

<v-container fluid fill-height>
    <v-layout row wrap>
        <v-flex v-for="(offer, index) in offers" :key="index" xs2 class="pa-1">
            <v-btn>{{ offer.siteName }}</v-btn>
        </v-flex>
    </v-layout>
    <v-layout column fill-height>
        <v-flex grow>
            <v-card class="fill-height">
                <p> test </p>
            </v-card>
        </v-flex>
    </v-layout>
</v-container>

<div class="d-flex fill-height" style="flex-direction:column">
  <v-row class="blue">
    <v-col cols="2" v-for="i in 15" :key="i" class="pa-1">
      <v-btn>{{ i }}</v-btn>
    </v-col>
  </v-row>
  <div class="fill-height" style="background-color: salmon">Down</div>
</div>