I'm facing an issue with my Vuetify two-column layout. The left column contains media with varying aspect ratios, while the right column houses a playlist. As the playlist grows in length, it extends the container, leaving empty space below the media.
I want the right column to have a scroll feature when the content is too long, without expanding the container. I tried setting a max height, but with the unpredictable aspect ratios of the media, the maximum height cannot be accurately determined, causing premature cutoffs.
<v-card dark>
<v-row no-gutters class="playlist-container">
<v-col cols="8" class="pa-0">
<!-- media element, could be image or video of any aspect ratio -->
<img src="https://placehold.it/1400x700">
</v-col>
<v-col cols="4" class="pa-0">
<!-- playlist container -->
<v-layout fill-height column justify-space-between>
<!-- playlist items -->
<v-list class="pa-0" class="playlist-items">
<v-subheader>Category title</v-subheader>
<v-list-item two-line link v-for="(video, idx) in items" :key="idx">
<v-list-item-avatar class="ma-2 ml-0 font-weight-bold">
{{ idx + 1 }}
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ video.title }}</v-list-item-title>
<v-list-item-subtitle>example • 1k stats</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action-text class="mr-2">
6:39
</v-list-item-action-text>
</v-list-item>
</v-list>
<!-- bottom link -->
<v-list class="pa-0">
<v-divider />
<v-list-item two-line link>
<v-list-item-avatar class="mr-4">
<v-icon size="32" color="primary">play_circle_filled</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Lorem ipsum</v-list-item-title>
<v-list-item-subtitle>Bottom text</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-layout>
</v-col>
</v-row>
</v-card>
For a demonstration, you can view a minimal demo here.