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