Vuetify V-flex full only half of card - vue.js

Question

My v-flex it is not respecting my orders and only half of element it was rendered. see the print:
Print from my view
Here is my script:
<v-card-title primary-title>
<div>
<p class="subheading grey--text">My title</p>
<h3 class="headline my-4">my sub title</h3>
<div>
<v-container fluid>
<v-card flat v-for="ticket in tickets" :key="ticket.id">
<v-layout row wrap :class="`pa-2 ticket ${ticket.status.id}`">
<v-flex xs3>
<div class="caption grey--text">#ID</div>
<div>{{ticket.id}}</div>
</v-flex>
<v-flex xs3>
<div class="caption grey--text">Assunto</div>
<div>{{ticket.subject}}</div>
</v-flex>
<v-flex xs3>
<div class="caption grey--text">Criado em</div>
<div>{{ticket.created_on}}</div>
</v-flex>
<v-flex xs3>
<div class="right">
<v-chip
small
:class="`${ticket.status.id} white--text caption my-2`"
>{{ticket.status.name}}</v-chip>
</div>
</v-flex>
</v-layout>
</v-card>
</v-container>
</div>
</div>
</v-card-title>
Someone has any ideas?
Tks.

Answer 1

You can add a full width flex box above the v-card on line 7:
<v-flex xs12>
<v-card flat v-for="ticket in tickets" :key="ticket.id">
...
EDIT: My mistake... after taking another look you can change the div on line 2 to a v-flex, which will give you the results like in this codepen: https://codepen.io/retrograde/pen/ZNYJRq?editors=0001 Note that I removed the code added by my original answer.