Looking at the code snippet provided below, I am facing an issue while trying to decrease the height of a v-select element. It seems like there is a minimum limit set for the height, as reducing it beyond height = 40 doesn't have any effect. Is there a way to bypass this limitation so that I can make this element smaller? This is required because I need to accommodate it in a relatively small div. Any help or suggestions would be greatly appreciated.
new Vue({
el: "#app",
data: {
years: [2015, 2016, 2017, 2018]
}
})<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3244475772001c071c0305">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="app">
<v-app>
<v-layout row>
<v-select
label="height=80"
outline
height="80"
:items="years">
</v-select>
<v-select
label="height=60"
outline
height="60"
:items="years">
</v-select>
<v-select
label="height=40"
outline
height="40"
:items="years">
</v-select>
<v-select
label="height=20"
outline
height="20"
:items="years">
</v-select>
</v-layout>
</v-app>
</div>