为什么类星体框架 select css 会出现这种奇怪的行为？

Question

I have a select control that I need to put on the right. I use html and css to achieve this, but there is strange behaviour when I click on the control for the first time. It breaks the options, but when navigate the options the control grows until there are not break lines:

https://codepen.io/andreschica/pen/LYWpKvJ?editors=1011

<div id="q-app">
  <q-card bordered class="my-card justify-between "> 
     <q-card-section class="row justify-between items-center bg-grey-2 q-pa-none">
      <q-item class="col-8 q-pa-none" style="background-color: #f5f5f5;">
      </q-item>
      <q-item class="col-4 q-pa-none" style="background-color: #f5f5f5;">
        <q-item-section>
          <div class="row items-center q-pa-sm col-12 justify-center ">
            <label class="text-weight-bold text-primary text-h5 q-mr-sm">Evento:</label>
           <q-select  v-model="model" class="col-grow" :options="listaEventos" > 
            </q-select>
          </div>
        </q-item-section>
      </q-item>
    </q-card-section>
  </q-card>
</div>

I need to avoid that behaviour. Thanks for your help.

Answer 1

This is due to col-grow and a few other things

<div class="row items-center justify-center ">
    <label class="text-weight-bold text-primary text-h5 q-mr-sm">Evento:</label>
    <q-select  v-model="model" class="col-10" :options="listaEventos" />
</div>