How to control height on Quasar select with mutiple selections

I'm using Vue 3 with Quasar and I have a q-select with the multiple attribute on it.

CodePen: https://codepen.io/humanhickory/pen/eYLQqQX?editors=1010

However, when I have a LOT of options selected, it's just a wall of text, shown in the first image. The user can select options by opening the drop down and selecting and de-selecting boxes, which is fine, and shown in the second image.

Image 1

Image 2

This would be the preferred end goal (I drew in the ellipses which is why they're not even). Have all of it be on 1 line, and then any overflow just gets hidden. A virtual scroll instead would also work. Honestly, anything that isn't a wall of text would be a good solution.

Goal

I have tried adjusting height and max height on multiple elements and it changes the height of the element, but not of the content; the content continues to overflow onto other inputs below.

style="height: 100%; max-height: 100%"

I'm at a complete loss on how else to make this work. Here's the code:

 <q-select
    filled
    v-model="selectedSpaces"
    :options="allSpaces"
    class="col-12 q-pa-md"
    style="max-height: 100px"
    multiple
    emit-value
    map-options>
        <template
            v-slot:option="{
                itemProps,
                opt,
                selected,
                toggleOption,
            }">
        <q-item v-bind="itemProps">
            <q-item-section avatar>
                <q-checkbox
                    :model-value="selected"
                    @update:model-value="toggleOption(opt)"/>
            </q-item-section>
            <q-item-section>
                <q-item-label v-html="opt" />
            </q-item-section>
        </q-item>
    </template>
</q-select>

Solution

You can truncate the selection with an ellipse using CSS. When using q-select and inspecting the DOM, the selection text lies inside of a span inside of a div with classname q-field__native.
You should then add the following styling:

<style>
.q-field__native > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
</style>

or if you want the style scoped to only the one component:

<style scoped>
.q-select >>> .q-field__native > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
</style>

working stackblitz example