Vuetify 限制网格列表高度

L. *_*emi 1 css vue.js vuetify.js

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

因此,在某些情况下,我需要使用 vuetify网格组件在网格中显示一些数据。

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

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

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

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

卡片高度限制为 300 像素,但里面的元素会不断扩展超过 v 卡片的高度。

这是一个Codepen。

我怎样才能得到我正在寻找的结果?谢谢。

con*_*exo 7

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