How to limit container width in Vuetify by pushing v-navigation-drawer to it?

Question

Vue.js

What I want to get: a container with one column for content, on the right sidebar aka navigation-drawer. You do not need to use a grid with columns, because the container should occupy the entire width of the screen. It turns out like this:

<v-app>
  <v-navigation-drawer app clipped right permanent>...</v-navigation-drawer>
  <v-app-bar app clipped-right>...</v-app-bar>
  <v-main>
    <v-flex class="flex-column fill-height pa-4">
      ...
    </v-flex>
  </v-main>
</v-app>

But when the window width is more than 1200px, my content becomes too stretched and the maximum width limit suggests itself. The width of the container, as far as I understand, in Vuetify is limited simply manually using max-width.

And it works, but the problem is that at high resolution the container is in the center, and the sidebar is anchored to the right edge of the screen, due to which there is an empty space between the container and the sidebar. And I would like the sidebar to be pressed to the right edge of the container and form with it, as it were, an inseparable block. And free space would be added to the left of the container and to the right of the sidebar. Conditionally something like this:

[ . . . . . . . top bar . . . . . . . . ]
[space][....container....][drawer][space]

and now it looks like this:

[ . . . . . . . top bar . . . . . . . . ]
[....container....][...space....][drawer]

I’m a little misunderstanding the grid modes in Vuetify, so it’s hard to decide what to start from, and there’s no similar example in the ready-made guide templates, I found only options there without a width limit.

Is it possible to do so?

Answer 1

Came up with a solution in case I can't find anything more elegant.

@media (min-width: 1000px) {
        .v-application {
            max-width: calc(1000px - 30px);
            margin-left: calc((100vw - 1000px) / 2);
        }

        .v-navigation-drawer--right {
            right: calc((100vw - 1000px) / 2);
        }
    }

1000px can be replaced with a different maximum container width. 30px is the sum of the sidebar or container padding.