Как в Vuetify ограничить контейнер по ширине, прижав к нему v-navigation-drawer?

Question

[WindBridges]

Что хочу получить: контейнер с одной колонкой для контента, справа сайдбар ака navigation-drawer. Использовать сетку с колонками не нужно, т. к. контейнер должен занимать всю ширину экрана. Получается так:

<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>

Но при ширине окна больше 1200px, мой контент становится слишком растянутым и напрашивается ограничение максимальной ширины. Ширина контейнера, насколько я понял, в Vuetify ограничивается просто вручную с помощью max-width.

И оно работает, но проблема в том, что на большом разрешении контейнер располагается в центре, а сайдбар привязан к правому краю экрана, за счет чего между контейнером и сайдбаром образовывается пустое пространство. А хотелось бы, чтобы сайдбар был прижат к правому краю контейнера и образовывал с ним как бы неразрывный блок. А свободное место добавлялось бы слева от контейнера и справа от сайдбара. Условно что-то вроде этого:

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

а сейчас получается так:

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

Немного недопонимаю режимы работы сетки во Vuetify, поэтому сложно решить от чего отталкиваться, а похожего примера в готовых шаблонах руководства нет, нашел там только варианты без ограничения ширины.

Возможно так сделать?

Answer 1

[WindBridges]

Придумал решение на случай, если ничего более элегантного не найду.

@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 можно заменить на другую максимальную ширину контейнера. 30px - это сумма отступов сайдбара или контейнера.