vuetify.js how to get full width of v-container

Question

I'm new to vuetify.js and started playing around with it.

This is my code.

Admin-panel.vue

<v-content class="yellow">
  <v-container>
    <v-layout>
      <router-view></router-view>
    </v-layout>
  </v-container>
</v-content>

create-user.vue

<template>
    <v-container class="red">
        <v-layout class="blue">
            <v-flex md12>
                form
            </v-flex>
        </v-layout>
    </v-container>
</template>

Here I can see v-container element gets the full width available. What I want is my v-container inside the create-user component to get the that same width. (Yellow will disappear and red will fill the screen)

How do I achieve this?

Answer 1

Use the fluid prop:

<v-container 
  fluid
/>

Codepen.

Answer 2

I was having the same issue.

I realized that in my instance I had a <v-content> on both the parent and child page. The <v-content> is used to make the app look pretty and manage spacing on the nav bar and title bar.

Be sure you only have one declared in your app.