Javascript Vuetify：如何在大屏幕上正确限制容器的最大宽度？

我的vuetify布局基于flex：

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

较小尺寸的容器和抽屉应适合整个屏幕宽度。 可能吗

UPD：澄清一下。以上是我想在大屏幕上看到的。在窄屏幕上，我想得到：

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

我现在在宽屏幕上看到的是：

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

---

我用下面的css解决了这个问题。这个解决方案不是最优雅的，但我会使用它，因为我没有其他解决方案。您应该将“1000px”替换为容器所需的最大宽度，将“30px”替换为填充的总和（或者尝试实验）

---

您可以将导航抽屉放在容器中，然后将

position:relative

样式添加到容器中，而不是以vuetify生成的类为目标。删除抽屉的

app

属性，改为

absolute

工具栏
内容
抽屉

.main容器{
职位：相对！重要；
最大宽度：1200px！重要；
}

---

这里有一个：

使用

v型间隔垫圈

？在哪里使用？在哪里有[空间]？窄屏幕上的布局应该是什么？我写道：在较小尺寸的屏幕上，容器和抽屉应该适合整个屏幕的宽度。如何将抽屉绑定到容器的右侧？所以，在有[space]的情况下使用v形垫片-您尝试过吗？

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

@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);
    }
}