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

Question

我有一个 select 控件需要放在右边。我使用 html 和 css 来实现这一点，但是当我第一次点击控件时出现奇怪的行为。它打破了选项，但是当导航选项时，控件会增长直到没有断线：

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>

我需要避免这种行为。感谢您的帮助。

Answer 1

这是由于 col-grow 和其他一些因素造成的

<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>

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

Why is that strange behaviour in quasar framework select css?

html

javascript

css

vue.js

quasar-framework