Lately, I've been working with Vue.js and the Vuetify framework, and I encountered a challenge that has me stumped.
In certain instances, I need to present data in a grid layout using the vuetify grid component.
After examining the code, I decided to embed it within a V-Card on one of my pages.
When there are only a few elements, let's say 7 or 8, the grid doesn't take up much space vertically.
However, as more components are added, the grid grows too tall and stretches beyond my available space, causing the page to expand (I don't want my page to be larger than the screen height).
I tried adding style="max-height:300px" to the V-card in hopes of preventing the grid from expanding further and simply showing a vertical scrollbar, but the result was not what I expected.
The card's height is limited to 300px, yet the elements inside continue to exceed this limit.
Here's the Codepen link.
Any ideas on how to achieve the desired outcome? Thank you.