[Feature Request] Support scrolling/touch interactions in VMonthPicker #23044

Problem to solve

In current version of VMonthPicker it uses a fixed width about ~300px, and i want to show a row of months.
If you set 12 cols for VMonthPicker months and set class="w-100", it displays a row of months, but is cutted when the parent width is too short, and is non scrollable.
See the following image.

Template vue

<v-month-picker
   v-model="selectedMonths"
   hide-header
   hide-title
   :months-columns="12"
   multiple="range"
   class="w-100"
   @update:model-value="searchReservations">
</v-month-picker>

Proposed solution

Set width to 100% to the month picker root, to display the full row of months.
In months, set width to 100% and overflow x to auto.
In months, remove flex-grow-1 (optional).

Translated, this custom style works as solution, so I propose to add a property maybe called 'fill' or 'fluid' or other name to apply this config automatically. This is useful to display a month selector in top of the page. In my case to filter reservations from january to august for example.

Maybe there is a better solution, perhaps the month grid could adapt to the size of parent and wrap the months in multiple rows if the width is not enough instead of using scrollbars, so the user don't need to scroll.

<template>
  <v-month-picker
     v-model="selectedMonths"
     hide-header
     hide-title
     :months-columns="12"
     multiple="range"
     class="month-picker-fill"
     @update:model-value="searchReservations">
  </v-month-picker>
</template>

<style>
.month-picker-fill.v-picker.v-month-picker {
    width: 100%;
    .v-month-picker__months {
        overflow-x: auto;
        width: 100%;
    }
}
</style>

it still adapts to the cols system.