vuetify v-flex xs12 only fill half the width

Question

I am trying to make list of cards using vuetify v-flex here is the code

    <div id="app">
    <v-app>
    <v-content>
        <v-container fill-height fluid>
        <v-layout>
            
            <v-flex xs12>
            <v-card dark color="grey">
                <v-card-title>
                <div>
                    <h2>Top Questions</h2>
                </div>
                </v-card-title>
            </v-card>
            </v-flex>
            
            <v-flex xs12>
            <v-card v-for="item in items" :key="item._id">
                <v-card-title>
                <h3>{{ item.title }}</h3>
                <p>{{ item.content }}</p>
                </v-card-title>
            </v-card>
            </v-flex>
        </v-layout>        
        </v-container>
    </v-content>
    </v-app>
</div> 

I am expecting each v-flex will fill 100% of the row. However, they only filled half of it.
https://codepen.io/anon/pen/mKBMEW

I can, however, add prop d-inline-block at v-layout. I am just curious about what happened with my first code before.

Answer 1

I think you need to add column attribute to v-layout.

Answer 2

When I used Ikbel's column solution, my flex-components max-width was overwritten to always be 100%. What I did is give row wrap attributes to v-layout.

Answer 3

For those who pass through this again.

In latest vuetify (from v2.x, e.g. 2.4), no longer has xs on v-col any more, use cols=12 instead.

Related post: vuetify v-col xs="12" only fill half the width