A Bootstrap row with a fixed max-height still takes up space when overflown

I have a div with colors - a Bootstrap row with lots of cols. I've set it a fixed max-height. Even though it looks like it's scrollable, the row with cols still takes up space and expands far beyond the footer:

This is my div with colors:

<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 row g-3 overflow-y-auto">
          <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>
  </section>
</template>

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

Here's the sandbox with this issue.

I tried to wrap it in another div with display: block and overflow: auto, but the end result is the same.

Thanks in advance!

You can change your Filter.vue to be like this:

<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 row g-3 overflow-y-auto">
        <span
          class="col-auto color-tile"
          v-for="(color, index) in filterList.colors"
        >
          <input
            type="checkbox"
            class="color-checkbox"
            :id="'color-' + (index + 1)"
            autocomplete="off"
          />
          <div
            class="btn"
            :for="'color-' + (index + 1)"
            :style="'background-color: ' + color"
          />
        </span>
      </div>
    </div>
  </section>
</template>

<style scoped>
.colors-div {
  max-height: 15em;
  /* Center the item */
  display: flex;
  justify-content: center;
}

.color-tile {
  position: relative;
  display: inline;
}

/* place your checkbox in front of the box and make it invisible */
.color-checkbox {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  opacity: 0;
}

.btn {
  /* Don't use absolute width in cases like this, use padding */
  padding: 15px;
  border: 1px solid #ddd;
}

.color-checkbox:focus + .btn {
  border-color: darkorange;
  box-shadow: 0 0 0 0.25rem rgba(204, 54, 0, 0.25);
}

.color-checkbox:checked + .btn {
  border: 2px solid darkorange;
}
</style>

I've added a few comments so you can check it out.