Vuetify vertical centering within v-flex element

For anyone else who needed this advice:

Use <v-layout align-center> together with <v-flex fill-height>

This vertically aligns the children:

<v-layout align-center>
  <v-flex fill-height></v-flex>
  <v-flex fill-height></v-flex>
</v-layout>

You have to delete the middle v-flex.

You can also use align-end on a v-layout with the last card in it.

If you want to keep padding between the two columns, you can add class pr-x with x a number between 0 and 5 to the first v-flex.

To keep the second column filling the height use fill-height on the v-layout wrapped in a v-flex.

Fiddle with padding

Spacing doc from Vuetify

Code answer :

<v-app>
   <v-layout row wrap >
      <v-flex xs8 class="pr-3">
         <v-card class="red" height="400px">
            Fixed Height Card
         </v-card>
      </v-flex>
      <v-flex >
         <v-layout column justify-space-between class="purple" fill-height>
            <v-card class="green">
               First Card
            </v-card>
            <v-card class="green">
               Second Card
            </v-card>
         </v-layout>
      </v-flex>
   </v-layout>
</v-app>