v-container is not applying the container behavior - vuetify.js

Question

I included Vuetify 2(latest) in my Vue project. I am trying to do some grids with cards inside of a container and it does apply container fluid behavior without including fluid.
Here is my App.vue
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
text
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
</v-app-bar>
<v-content>
<v-layout>
<v-container videos-content grid-list-md >
<v-layout wrap>
<v-flex v-for="video in videos" :key="video.id" xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title>{{video.title}}</v-card-title>
<v-card-text>{{video.description}}</v-card-text>
<v-card-actions>
<a target="_blank" :href="video.url">open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</v-content>
</v-app>
</template>

Answer 1

In my opinion, the correct structure of vuetify layout is v-container >> v-layout >> v-flex
So maybe remove v-layout tag defined outside of v-container?
Though not quite sure what you meant by 'fluid behavior'...

Answer 2

It seems to be working fine, you just need to follow standard structure from vuetify documentation. I made a pen for you
<div id="app">
<v-app>
<template>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn>
<span class="mr-2">Latest Release</span>
</v-btn>
<v-container grid-list-md >
<v-layout wrap>
<v-flex xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title></v-card-title>
<v-card-text></v-card-text>
<v-card-actions>
<a>open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
</div>