Vuetify限制网格列表高度

Question

我最近使用Vuetify框架开发了 Vue.js，我遇到了一个我无法弄清楚如何解决的问题。

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

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

当我在其中只有少数元素时，如7/8，网格不是那么高。

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

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

卡片高度限制为300px，但内部元素保持在v卡高度上扩展。

这是Codepen。

我如何得到我正在寻找的结果？感谢。

Answer 1

只需将overflow-y: auto;添加到您正在应用max-height的元素中。