不指定固定height属性值时使用overflow实现2/2区块滚动是否可行

完全可以不指定固定height数值实现该滚动效果，核心是通过flex布局的高度分配规则打通高度约束链，让overflow-auto可以正确触发。

调整思路 #

你现在的写法无法脱离height:100%的核心原因是父容器没有明确的高度边界，overflow属性无法识别可滚动的阈值。只需要给容器链路加上flex自动高度分配即可：

1. 首先确保最外层布局容器（比如页面根容器）已经占满可用高度，可设置height: 100vh或者继承上层高度
2. 给当前的v-row容器加上flex: 1属性，让它自动填充父容器剩余的所有可用高度
3. 去掉v-col上硬写的style="height: 100%"，依靠自动高度就能触发滚动

修改后代码示例 #

<!-- 注意外层父容器需要已设置高度约束，例：外层容器加 class="d-flex flex-column h-100vh" -->
<v-row class="d-flex align-stretch info flex-1">
  <v-col class="overflow-auto">
    2/2
    <v-sheet>
      <v-btn v-for="n in 42" :key="n" class="my-2" block>
        {{ n }}
      </v-btn>
    </v-sheet>
  </v-col>
</v-row>

补充说明 #

• 该方案全程没有指定具体像素值的height，容器高度会随父级可用空间自动适配，响应性更好
• 如果是嵌套在其他布局内，只需要保证从根容器到当前v-row的flex高度链路是贯通的即可正常触发滚动

内容的提问来源于stack exchange，提问作者DmitryBel