css - 如何让 v-col 变成可滚动的？

Question

我正在尝试实现以下布局。

• 灰色容器应遍布整个视口(viewport)，但不得更大
• 绿色v-row应填充灰色容器
• v-col 1 应填充可用空间，必要时应添加滚动条
• v-col 2 应填充可用空间并在必要时缩小
• v-col 3 应始终位于底部且仅占用必要的空间

到目前为止，我有以下内容。问题是“1”不会变成可滚动的，而是将“2”和“3”推出视口(viewport)。我做错了什么？

额外问题:是否有更好的方法让容器填充视口(viewport)？由于某种原因，100% 对我不起作用。

更多好处:仅使用常规 div 来实现这一点会更容易吗？

<template>
  <v-app>
    <v-container class="ma-0 pa-0 d-flex full-height">
      <v-row no-gutters class="d-flex flex-column flex-nowrap flex-1-0-100">
        <!-- column 1 -->
        <v-col class="overflow-y-auto flex-1-0">
          <v-list :items="dummy"></v-list>
        </v-col>

        <!-- column 2 -->
        <v-col class="d-flex justify-center flex-1-1-100">
          <v-btn color="primary">+</v-btn>
        </v-col>

        <!-- column 3 -->
        <v-col class="d-flex justify-center flex-0-1">
          <v-btn color="secondary">Schließen</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
  const length = 10 // Adjust for smaller/larger array
  const dummy = [...Array(length).keys()]
</script>

<style scoped>
  .full-height {
    height: calc(100vh - 37px);
  }
</style>

Answer 1

据我了解，您希望在第 1 列和第 2 列之间平均分配未使用的空间，但第 1 列应占用尽可能多的空间，但不能超过可用空间。

那么有两个问题:

• 第 1 列可以增长而不收缩 (flex-1-0)，但您希望它占用的空间不超过其他列剩余的空间，因此如果有，它应该收缩没有足够的可用空间，因此应该是 flex-1-1
• 第 2 列的 flex-basis 设置为 100% (flex-1-1-100)，但它应该只占用第 1 列留下的空间，因此应该是 flex-1-1

这是一个playground

---

对我来说，如果您的布局只是一个 flex 列，那么使用 v-row 和 v-col 会很困惑。在这种情况下，仅使用 div 似乎更容易，特别是因为 v-col 有自己的 Flex 规则，可能会妨碍您。这是playground using divs.