Vuetify Container max-width fixed

Question

I am building a web application with Vue.js and Vuetify (https://vuetifyjs.com/en/). I have a simple layout, with 3 columns. However, I would like the 3 columns to fill the whole width of the page, but there is an automatic piece of CSS that enforces max-width to 960px. Why is that? How can I use the whole screen? You can also check it here: https://codepen.io/mlikoga/pen/KeLNvy

<div id="app">
  <v-app>
    <v-content>
      <v-container ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

The automatic CSS:

@media only screen and (min-width: 960px)
.container {
  max-width: 960px;
}

Answer 1

The concept of containers is very common among website layouts. By default, Vuetify uses a 'fixed' container. A 'fluid' container will fill the viewport.

You can set the fluid prop to true on your Vuetify container <v-container>:

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

Here is some helpful information about fixed vs fluid containers: https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Additional Vuetify grid information can be found here: https://vuetifyjs.com/en/layout/grid

Answer 2

Super Simple Answer: It's similar to the answer above but includes width:100% in the style; as mine didn't work without it.

<template>
     <v-container fluid style="margin: 0px; padding: 0px; width: 100%">
          <v-layout wrap>
               <div class="container">
                    Content you want in a container as this takes on the container class.
               </div>
               <div>
                    Content you don't want contained as it takes on the fluid 100% width. 
               </div>
          </v-layout>
     </v-container>
</template> 

Basically, you override the entire default v-container with a width of 100%.