How to fix the columns size in different screen resolutions using css grid

I'm creating a simple dashboard using Vue and Veutify. I choose to structure the layout using the grid system available in vuetify's library. The problem is that I can't get the same look depending on the screen resolution. Is there any way to have the left container always with the width of the side drawer?

I already try to set the max-width of the side bar manually in 300px, but did'nt work.

<v-container grid-list-md text-xs-center>
    <v-layout row wrap>
      <v-flex xs3 class="side">
        <SideBar/>
      </v-flex>
      <v-flex xs9 class="main" >
         <MainPage/>
      </v-flex>
    </v-layout>
  </v-container>

I expect expected

I got actual