Vuetify Flex Layout - не заполняет высоту

Question

Я пробовал множество различных опций со следующим кодом, однако я не могу получить это, чтобы заполнить оставшуюся высоту. (Второй макет должен заполнить оставшуюся высоту) Что я здесь делаю неправильно?

<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>

Это создает следующее:

Я бы хотел, чтобы карточка с «test» начиналась сразу после ссылок вверху, а затем заполняла оставшуюся часть высоты.

Спасибо заранее за вашу помощь!

С уважением, Джо sh

Answer 1

Попробуйте использовать column fill-height на правой стороне, а затем grow на v-flex ...

<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>

https://codeply.com/p/bwE5ifP4Pe

Answer 2

Вам не нужно так много разметки в вашем сценарии, и вы можете сократить ее до нескольких строк. Я просто заполнил некоторые цифры вместо вашего пользовательского компонента в v-for. Это вытянет нижнюю карту на максимальное количество сразу после вашей для l oop. v-row и v-col - это путь к go, теперь в 2.0 (https://vuetifyjs.com/en/components/grids/).

<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>

Пример Codesandbox