Why is width ignored when using flex in Vuetify 3?

Question

Using Vuetify 3, I'm trying to set up a custom pagination for a table. It's going well, except the fact that the <v-select> is ignoring the width using 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>

And the script part (just for the ref, nothing more)

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

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

If you watch the <v-select> you can see there is a style="max-width: 150px" completely ignored (mostly due to class="d-flex align-center" but I don't know how to make it work together).

Here the Vuetify Playground to better understand in a live snippet, what I mean.

EDIT:

This first image is how it looks right now

And this is how I want the select to look like (plus the center alignment, which I'm not able to set, aside using margin or padding, but I want a more dynamic situation)

Any suggestion?

Answer 1

Looking at the DOM with the inspector, part of the problem is that the inner div element with class v-input__control does not use the full width of the parent div. Setting this one element to have width: 100% will help.

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

Another issue is that there is some space being reserved for an input details element

If you want to utilize this space, you need to get rid of this element. This can actually be done with the prop hide-details

Hides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.

Add the prop like so:

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

This should achieve the look you want.

Updated Vuetify Playground