CODEWITHSUNDEEP
cssvue.jsvuetify.js
L. Gangemi
L. Gangemi

Reputation: 3290

Vuetify limit grid list height

I've been developing in Vue.js using the Vuetify framework recently and I came into a problem which i can't figure out how to solve.

So, in a couple of cases I need to display some data in grid using the vuetify grid component.

I gave a look at the code about it, and I decided to try it inside a V-Card in one of my pages.

When I got only a few elements inside it, like 7/8, the grid is not so high.

But when the components are more and more the grid become too much high and it fill my avaiable space, expanding my page (I don't want my page to expand more than the screen height).

I thought that by adding a simple style="max-height:300px" to the V-card I could stop the grid from expanding and the grid would get a simple lateral scrollbar, but the effect I obtained is a bit different.

The card height is limited to 300px, but the elements inside keep to expanding over the v-card height.

Here's a Codepen.

How can i get the result I'm looking for? Thanks.

Upvotes: 1

Views: 8850

Answers (1)

connexo
connexo

Reputation: 56770

Just add overflow-y: auto; to the element you're applying the max-height to.

Upvotes: 7

Related Questions