Vuetify 限制网格列表高度

Question

我最近一直在使用 Vuetify 框架 在 Vue.js 中进行开发，但我遇到了一个我不知道如何解决的问题。

因此，在某些情况下，我需要使用 vuetify 在网格 中显示一些数据 grid component。

我查看了有关它的代码，并决定在我的一个页面中的 V-Card 中尝试它。

当我里面只有几个元素的时候，比如7/8，网格不是那么高。

但是当组件越来越多时，网格变得太高，它填满了我的可用空间space，扩展了我的页面 （我不希望我的页面展开超过屏幕高度）.

我以为通过在V-card中添加一个简单的style="max-height:300px"我可以阻止网格扩展并且网格会得到一个简单的横向滚动条，但是我得到的效果有点不同。

卡片高度限制为300px，但里面的元素不断扩展超过v-card高度

这是一个Codepen。

我怎样才能得到我想要的结果？谢谢

Answer 1

只需将 overflow-y: auto; 添加到要应用 max-height 的元素即可。