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!