防止容器立柱膨胀高度答案

【问题标题】：Prevent column expanding height of container防止容器立柱膨胀高度
【发布时间】：2020-05-26 21:28:31
【问题描述】：

我有一个使用 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

【问题讨论】：

如果不被欺骗，相关 - stackoverflow.com/questions/34194042/…

标签： css vue.js flexbox vuetify.js

【解决方案1】：

我可以通过在播放列表项v-list 中添加一个类来做到这一点，如下所示：

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

【讨论】：

【解决方案2】：

使用document.getElementById和element.offsetHeight获取右侧列的当前高度作为计算属性，然后设置播放列表容器：

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

其中height 是计算的高度。

【讨论】：