为什么在 Vuetify 3 中使用 flex 时宽度会被忽略？

Question

使用 Vuetify 3，我尝试为表格设置自定义分页。一切进展顺利，除了

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

还有脚本部分（只是为了

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

的样子（加上中心对齐，我无法设置，除了使用边距或填充，但我想要一个更动态的情况）

有什么建议吗？

Answer 1

用检查器查看 DOM，部分问题在于类为

v-input__control

的内部 div 元素没有使用父 div 的完整宽度。将这一元素设置为

width: 100%

将会有所帮助。

<style scoped>
  .v-select :deep(.v-input__control) {
    width: 100%;
  }
</style>

另一个问题是为输入详细信息元素保留了一些空间

如果你想利用这个空间，你需要去掉这个元素。这实际上可以通过道具 hide-details

来完成

隐藏提示和验证错误。设置为自动消息时，仅当有消息（提示、错误消息、计数器值等）要显示时才会呈现。

像这样添加道具：

<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"
  hide-details
></v-select>

这应该能达到你想要的外观。

更新了 Vuetify Playground