How to disable carousel in v-tabs - vue.js

Question

I'm doing kind of horizontal navigation bar using v-tabs and v-tabs-items to switch between slides by clicking on the specific tab.
But Vuetify automatically adds carousel to v-tabs component. How can I disable it? I need to make v-tabs component multilined.
I tried to add v-tab inside v-item-group, but it loose all it's styles. Also, hide-slider didn't disable slider too.
<v-tabs v-model="tab" hide-slider>
<v-tab v-for="(item, index) of [1, 2, 3, ..., 100]" :key="index">
{{ item }}
</v-tab>
</v-tabs>
I should render elements like on this picture. If it haven't enought space to for element on current line - it should add it on next.

Answer 1

.v-tabs-bar__content {
flex-wrap: wrap;
width: 100%;
}
div.v-tabs-bar {
height: auto;
}
... will, most likely, solve your problem.
See it working:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [...Array(100).keys()].map(() => ['anything', 'whatever', 'something'][Math.floor(3 * Math.random())]),
}),
propsData: {
tab: {
type: Number,
default: 0
}
}
})
.v-tabs-bar__content {
flex-wrap: wrap;
width: 100%;
}
div.v-tabs-bar {
height: auto;
}
div.v-tab {
line-height: 3rem; /* or use padding instead */
}
<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#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.0.15/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.0.15/dist/vuetify.min.js"></script>
<div id="app">
<v-tabs>
<v-tab v-for="(item, index) in items" :key="index">
{{item}}
</v-tab>
</v-tabs>
</div>