Prevent column expanding height of container

Question

I have a two-col layout built with Vuetify, where the left column contains media of varying aspect ratio, and the right column contains a playlist. When the playlist gets too long, it expands the height of the container leaving an empty area under the media.

I'm trying to have it so if the right column has too much content it scrolls, without expanding the container. I've tried setting a max height, but as the aspect ratio of the media can vary, the maximum height isn't know, meaning it can get cut off too early.

<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 &bull; 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>

Here is a minimal demo: https://codepen.io/benlewisjsy/pen/ExjjGeq

Related if not dupe - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings — Paulie_D, Feb 11 '20 at 13:04

score 1 · Accepted Answer · answered Feb 11 '20 at 13:48

1

I was able to do it by adding a class to the playlist items v-list, with the below:

.playlist-container .playlist-items {
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}

answered Feb 11 '20 at 13:48

Benedict Lewis

2,733
7
37
78

score 0 · Answer 2 · answered Feb 11 '20 at 13:52

Get the current height of the right-hand column as a computed property using document.getElementById and element.offsetHeight, then set the playlist container:

<v-col class="pa-0 overflow-y-auto" :style="{'max-height': `${height}px`}">

where height is the computed height.

Prevent column expanding height of container

2 Answers2