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="
                        datatable.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.

Any suggetion?