[Vuejs]-Vuetify Flex Layout – is not filling the height

by

1👍

Try using column fill-height on the right side, and then grow on the 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

👤Carol Skelly

0👍

You don’t need as much markup in your scenario and can cut this down to just a few lines.

I just filled in some numbers instead of your custom component in the v-for.
This will stretch the lower card to the maximum amount right after your for loop. The v-row and v-col is the way to go now in 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 example

👤discolor

Leave a comment