I am facing an issue where the component created using v-card in a grid system does not fill the full height. I tried using d-flex but it did not work as expected.
The middle column with a white v-card should occupy the entire column height but it is getting stacked at the top instead. Here is the image showing the desired functionality: https://i.sstatic.net/OMV4d.png
Below is the code, and you can also view it on Codepen to see that it does not extend to the full column height and remains nested at the top.
var car = Vue.component('car', {
template: `
<div class="car">
<v-flex d-flex child-flex>
<v-card >
<v-card-text>
<div class="text-center font-weight-black title text--primary">
test
</div>
<div class="text-center">
data
</div>
</v-card-text>
</v-card>
</v-flex>
</div>
`
})
new Vue({
el: '#app',
data: () => ({
lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
}),
components: {"car":car}
})<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddaba8b8a9b4bba49deff3a5">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-sm>
<v-layout row wrap>
<v-flex d-flex xs12 sm4 child-flex>
<v-card color="orange lighten-2" tile flat>
<v-card-text>Card 1</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs12 sm2>
<v-layout column wrap>
<car></car>
<car></car>
<car></car>
</v-layout>
</v-flex>
<v-flex d-flex xs12 sm6>
<v-card color="red lighten-2" dark tile flat>
<v-card-text>{{ lorem }} {{ lorem }} {{ lorem }} {{ lorem }} {{lorem}}</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs12 sm4 child-flex>
<v-card color="purple lighten-1" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 sm2 child-flex>
<v-card color="green lighten-2" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs12 sm6 child-flex>
<v-card color="blue lighten-2" tile flat>
<v-card-text>{{lorem}} {{lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>