Vuetify/Vue 2 - Force a v-card to always be square, but resize dynamically

Question

The issue I'm running into is I'm trying to enforce a v-card to always remain a square (or really, whatever aspect ratio I've set), even if it means scrolling or cutting off text/components inside that v-card.

Example: I want this v-card with the lorem ipsum text to always be the same size as the square cards being displayed, but just allowing scrolling instead (or even just cutting off the text would be a good start).

The v-img is being used to stretch that v-card to the square size when there isn't enough content to do so, not sure if something else could be used here?

Here is the code being used for displaying the card in v-row for loop:

  <v-card width="100%"
          aspect-ratio="1"
          :color="text ? 'primary' : ''">
      <v-img aspect-ratio="1">
        <v-card-text class="text-h6 font-weight-black white--text">
          {{ text }}
        </v-card-text>
      </v-img>
  </v-card>

Thank you in advanced.

Answer 1

you are looking for this

you need to set height width dynamic using calc or something else

<v-row>
    <template v-for="i in 10" >
      <v-col sm="3" lg="6" md="4">
    <v-card :key="i"
            class="ma-2 pt-2"
            outlined
            style="overflow-y:scroll;
                   height: 250px"
          aspect-ratio="1" 
          :color="text ? 'primary' : ''">
      <v-img aspect-ratio="1">
        <v-card-text >
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

        </v-card-text>
      </v-img>
  </v-card>
        </v-col>
      </v-row>