Why is v-select floating on scroll?

Question

Vue.js

Docs
When I test on their site by examples, the dropdown is fixed.

<v-select
                        :items="cities"
                        filled
                        rounded
                        hide-selected
                        v-model="defaultSelected"
                />

No additional modifications to the styles were made.

spoiler

<div class="v-menu__content theme--light menuable__content__active" style="max-height: 304px; min-width: 309px; 
top: 339px; left: 33px; transform-origin: left top; z-index: 8;"><div role="listbox" tabindex="-1" class="v-list v-select-list 
v-sheet v-sheet--tile theme--light theme--light" data-v-28f09eb7="true" id="list-22"><div tabindex="0" aria-selected="false" 
id="list-item-39-1" role="option" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div 
class="v-list-item__title">BEIJING</div>/div></div></div></div>

element.style {
    max-height: 304px;
    min-width: 309px;
    top: 339px;
    left: 33px;
    transform-origin: left top;
    z-index: 8;
}
.v-menu__content {
    position: absolute;
    display: inline-block;
    border-radius: 4px;
    max-width: 80%;
    overflow-y: auto;
    overflow-x: hidden;
    contain: content;
    will-change: transform;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.v-menu__content {
    z-index: 2 !important;
}