Vuetify v-list 在设置为溢出时滚动时不尊重其父级的高度

Question

我有一个网站，其中一个页面不应滚动（整个页面应适合客户端屏幕）。在这个网站上，我需要在一列中有一个可选对象的列表，它可能会非常大（它最终肯定会溢出屏幕）

我已将这些项目存储在 <v-list> 组件中，并命令它在溢出时滚动。然而，问题是当 <v-list-item> 元素的数量太多时，它会强制其父列增加大小，从而破坏不可滚动的页面布局。这似乎是因为所有实际的 <v-list-item> 组件仍在渲染，这会拉伸 <v-list>，尽管当它达到其父高度的 100% 时它被设置为溢出。

我可以通过根据 px 定义 max-height 来解决这个问题。但这不是一个可以接受的解决方案，因为它需要完全响应。

代码笔中对此进行了演示。紫色列中的列表（最初被注释掉）应该使列表在大于紫色列的高度时滚动。但是，相反，它会拉伸整个页面高度并使所有内容在最终开始滚动之前以不同的高度呈现。

Codepen link

橙色栏基本上是我想要的，但显然 max-height 是在 px 中定义的，它不一定在每个人的屏幕上都是正确的。但它应该看起来像这样：

所有颜色仅供参考

最后一点，我们确实发现 fill-height 参数在 <v-container> 中使用有些奇怪，显然它已被弃用？但这是我们在添加其他所有内容之前始终如一地正确呈现完整页面高度的唯一方法。

Answer 1

我想我找到了你要找的东西：https://codepen.io/tino-hb/pen/eYvdMXO?editors=1000

它的基本布局略有不同，但我认为它会很好地满足您的用例。

键是 v-main 的 100vh 以及网格列和列表周围的 flexbox 和 max-height: 100% 的组合。

<v-main style="height: 100vh;">
    ...
    <v-col style="max-height: 100%; background-color: magenta;">
        <v-list class="overflow-y-auto" style="max-height: 100%">
        ...
    ...
</v-main>

Vuetify v-list 在设置为溢出时滚动时不尊重其父级的高度

Vuetify v-list does not respect the height of its parent when being set to scroll when overflowing

html

flexbox

vue.js

vuetify.js