设置固定max-height的Bootstrap row溢出时仍占用空间的问题

问题分析 #

你遇到的问题根源在于直接将Bootstrap的row作为滚动容器：Row默认是flex布局，其高度计算逻辑会优先适配内部col-auto元素的总高度，即便设置了max-height和overflow-y:auto，也无法正确触发滚动，最终导致容器撑满内容空间甚至超出页脚。

解决方案：分离滚动容器与Bootstrap Row #

将滚动容器和Row的职责拆分，让Row作为滚动容器的子元素，这样滚动容器的高度限制才能正常生效：

<script setup>
const props = defineProps({
  filterList: Object,
  ...
})
</script>

<template>
  <section class="col-3">
    <div class="mb-3">
      <h3 class="fs-3">Color</h3>
      <!-- 独立滚动容器，负责高度限制与滚动逻辑 -->
      <div class="colors-div overflow-y-auto">
          <!-- Bootstrap Row仅负责内部颜色选项的流式布局 -->
          <div class="row g-3">
            <div class="col-auto" v-for="(color, index) in filterList.colors">
              <input type="checkbox" class="btn-check" :id="'color-' + (index + 1)" autocomplete="off">
              <label class="btn" :for="'color-' + (index + 1)" :style="'background-color: ' + color"></label>
            </div>
          </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.colors-div {
  max-height: 15em;
}
</style>

关键说明 #

• 滚动容器（colors-div）为普通块级元素，通过max-height限制高度，overflow-y:auto触发垂直滚动
• Bootstrap Row仅承担内部col-auto的布局职责，其高度会被滚动容器的约束限制，不会再撑开父容器

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