Html 为什么在Vuettify 3中使用Flex时会忽略宽度

我正在使用Vuetify 3，try 为表格设置自定义页面.一切进展顺利，除了<v-select>使用Flex忽略了宽度这一事实.

<template>
  <v-app>
    <v-row class="mt-2">
      <v-col cols="12" sm="12">
        <div class="d-flex flex-wrap ga-3 justify-end">
          <!-- Items per Page -->
          <v-select
            class="d-flex align-center"
            label="Items per page"
            density="comfortable"
            :model-value="itemsPerPage"
            :items="['5', '10', '25', '100']"
            variant="outlined"
            @update:model-value="itemsPerPage = parseInt($event,10)"
            style="max-width: 150px"
          ></v-select>
          <p class="d-flex align-center">
            {{ page * itemsPerPage - itemsPerPage + 1 }} - {{ page *
            itemsPerPage }} of {{ total }}
          </p>
          <!-- Pages selection -->
          <v-pagination
            class="d-flex align-center"
            density="comfortable"
            rounded="circle"
            v-model="page"
            :length="pageCount"
            :total-visible="6"
          ></v-pagination>
        </div>
      </v-col>
    </v-row>
  </v-app>
</template>

还有 playbook 部分(仅限ref人，仅此而已)

<script setup>
  import { ref } from 'vue'

  const page = ref(1)
  const itemsPerPage = ref(10)
  const total = ref(150)
  const pageCount = ref(10)
</script>

如果你观看<v-select>，你会发现有一个style="max-width: 150px"完全被忽视(主要是由于class="d-flex align-center"，但我不知道如何让它一起工作).

这里的Vuetify Playground个片段需要更好地理解我的意思.

编辑 :

第一张图片是它现在的样子

这就是我希望select的外观(加上中心对齐，我无法使用页边或填充将其放在一边，但我想要一个更动态的情况)

有什么建议吗？