Flex 列上的 Vuetify 溢出导致整个页面溢出

Question

在我的三列 Vuetify 布局中，我有一列非常高。我只希望这一列有一个滚动条。但是，下面的代码导致整个页面溢出！有什么帮助吗？

<template>
  <v-container fluid class="secondary fill-height">
    <v-row class="fill-height ">
      <v-col class="accent rounded overflow-y-auto" cols="2">
        <div class="text-center">
          Lorem ipsum....super long
        </div>
      </v-col>
      <v-col class="primary rounded" cols="5">Editor</v-col>

      <v-col class="success rounded" cols="5">Stage Stuff</v-col>
    </v-row>
  </v-container>
</template>

Answer 1

向包含长内容的 div 添加 max-height: calc(100vh - 48px) 样式。

<template>
  <v-container fluid class="secondary fill-height">
    <v-row class="fill-height">
      <v-col class="accent rounded overflow-y-auto" cols="2">

        <!-- Add max-height to this div so its height won't expand past the viewport's height -->
        <div class="text-center" style="max-height: calc(100vh - 48px)">
          Lorem ipsum....super long
        </div>


      </v-col>
      <v-col class="primary rounded" cols="5">Editor</v-col>
      <v-col class="success rounded" cols="5">Stage Stuff</v-col>
    </v-row>
  </v-container>
</template>

基本上，当其内容变长时，您只需限制 div 的最大高度。 100vh 是视口的全高。 48px 是 <v-container /> 和 <v-col /> 的累积垂直填充。

See live demo.

注意： 48px 来自整个页面的累积垂直填充/边距/边框。在我们的例子中，它是 <v-container/> 的 12px 顶部和底部填充加上 <v-col/> 的 12px 顶部和底部填充。当我们想要实现一个完整的分页器 div 时，这是一个已知的技巧。您可以在此处阅读更多信息：https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j