Css Vuetify非滚动导航抽屉

我有下一个结构： 在导航抽屉中： -图奥尔巴 -搜索块 -项目清单 -页脚

看起来是这样的：

问题是，当我溢出项目列表时，所有导航抽屉的滚动都处于活动状态，而不是激活项目列表滚动

我试图使项目列表滚动，而不固定它的高度（填补剩余空间，直到页脚）。 我试过为导航抽屉设置高度：100vh，但没用

JSFIDLE链路

Vue.use（Vuetify）；
var vm=新的Vue({
el:“应用程序”，
数据：{
出票人：空
}
});

一些
搜索

1.
&抄袭；2018年-Vuetify
一些内容
编辑项目的
v布局，如下所示：

<v-layout d-flex align-space-around justify-center column class="items">

但是OP不想要固定的高度。因此，也许可以使用
高度：calc（100vh-导航栏中的其他组件）填充剩余高度，例如高度：计算（100vh-56px-60px）。我不确定交叉浏览者的工作方式是否可行？但无论如何，在我看来，OP一开始似乎不知道他在做什么（我可能错了），所以祝你好运。实际上，没有固定的高度，只有最大高度。所以这是可行的。然而，他可能并不完全清楚自己在寻找什么。也许我不太明白。如果他想要3行，并且想要第二行获得可用的高度，他可以使用CSS网格<代码>网格模板行
：200px 1fr 100px`。修正了一行。哦，哈哈。关于
max height
vs
height
你是对的，但本质上是一样的，它并没有填满剩余的空间，我得到的印象是，这正是OP想要的。同意，可能有多种解决方案。这个问题在国际海事组织来说太宽泛了，不必费心去回答它，类似但又很窄的问题可能在该地区的某个地方得到了回答。
.items {
    max-height: 200px;
    overflow: auto;
}