防止容器的列扩展高度

Question

我有一个用Vuetify构建的两列布局，其中左列包含纵横比不同的媒体，右列包含播放列表。当播放列表过长时，它将扩大容器的高度，并在媒体下方留下空白区域。

我正在尝试使用它，因此如果右列中的内容过多，它会滚动而不扩展容器。我尝试设置最大高度，但是由于介质的纵横比可能会变化，因此最大高度是未知的，这意味着它可能过早切断。

<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>

这里是最小演示：https://codepen.io/benlewisjsy/pen/ExjjGeq

Answer 1

我通过在播放列表项v-list中添加一个类别，做到了以下几点：

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

Answer 2

获取右侧列的当前高度作为计算属性，然后设置播放列表容器：

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

其中height是计算出的高度。