Reduce dropdown's width VUEJS2 - vue.js

Question

I have a v-navigation-drawer and a dropdown menu inside it.
I'd like them both to have the same width whether the dropdown's up or down. At the moment, the dropdown is going outside the drawer when I open it. Does anyone know how to reduce a dropdown's width ?
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="drawerSettings"
absolute
temporary
>
<template>
<v-container fluid>
<v-select
v-model="valuesType"
:items="typeArray"
label="Relationship"
multiple
>
<template v-slot:prepend-item>
<v-list-item
ripple
#mousedown.prevent
#click="toggleType"
class="test"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'indigo darken-4' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-select>
</v-container>
</template>
</v-navigation-drawer>

Answer 1

First, remove the <v-container fluid> because it's taking padding, then use prop attach with v-select> , it specifies which DOM element that this component should detach to
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
drawerSettings: true,
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
selectedItem: [],
}),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<div id="app">
<v-app id="inspire">
<v-card>
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="selectedItem"
absolute
temporary
>
<v-select
v-model="selectedFruits"
:items="items"
label="Favorite Fruits"
multiple
attach
>
</v-select>
</v-navigation-drawer>
</v-card>
</v-app>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>