当我打开一个内容溢出的表格或其他东西时，我遇到了滚动条的问题。我可以看到右边的滚动条，因为html上有一个样式：overflow-y: scroll;。然而，在我的测试环境中，当我加载50 - 100个设备时，表格变大，但右侧的滚动条仍然保持灰色，我无法向下滚动。另一方面，在我的生产环境中，滚动条按预期工作。我无法理解是什么导致了这个问题，因为我没有对HTML进行任何样式更改，body或table组件本身。下面是我在测试环境中看到的图片：

现在，您可以在"prod"环境中看到该表：

我试过完全禁用html的溢出并在body上启用overflow-y: auto;，但是当我向下滚动到底部时，LOGOUT按钮将保持在左侧导航的中间位置。然而，我知道最好的解决方案可能是在表上设置vh高度并将其设置为溢出，但是，我的分页将不得不在一个定制的单独的html上进行，现在它只是从vuetify库中预先构建的。另外，我的目标是找到导致这种情况的原因，因为html、主体、表格或我认为可能与此相关的任何其他组件的样式没有变化。
下面是我的代码：

<template>
    <v-card>
        <remove-dialog ref="removeDialog" @refresh="fetchDevices"></remove-dialog>
        <add-dialog ref="addDialog" @refresh="fetchDevices"></add-dialog>

        <v-card-title class="mb-4">
            <v-btn color="success" @click="addDevice" outlined small>
                <v-icon>mdi-plus</v-icon>
                {{ $t('action.addNew') }}
            </v-btn>
            <v-spacer></v-spacer>
            <div>{{ `You have ${devicesLeft} available devices to make ` }}</div>
            <v-spacer></v-spacer>
            <v-text-field
                class="pa-0"
                v-model="search"
                @change="fetchDevices"
                append-icon="mdi-magnify"
                :label="$t('label.search')"
                single-line
                hide-details
            ></v-text-field>
        </v-card-title>

        <v-data-table
            :headers="headers"
            :items="devices"
            :options.sync="options"
            :server-items-length="totalDevices"
            :loading="isLoading"
            :footer-props="footerOptions"
            :no-results-text="$t('noDataAvailable')"
            :no-data-text="$t('noDataAvailable')"
        >
            <template v-slot:[`item.connectedItems`]="{ item }">
                <a @click="goToConnectedItems(item.connectedItems)">{{ item.connectedItems.length }}</a>
            </template>
            <template v-slot:[`item.lastConnection`]="{ item }">
                <span v-if="item.lastConnection">{{ item.lastConnection | moment('from', 'now') }}</span>
                <span v-else>n/a</span>
            </template>
            <template v-slot:[`item.actions`]="{ item }">
                <v-tooltip top>
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn color="primary" v-bind="attrs" v-on="on" @click="editDevice(item)" icon>
                            <v-icon>mdi-pencil</v-icon>
                        </v-btn>
                    </template>
                    <span>{{ $t('action.edit') }}</span>
                </v-tooltip>
                <v-tooltip top>
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn color="error" v-bind="attrs" v-on="on" @click="removeDevice(item)" icon>
                            <v-icon>mdi-delete</v-icon>
                        </v-btn>
                    </template>
                    <span>{{ $t('action.delete') }}</span>
                </v-tooltip>
            </template>
        </v-data-table>
    </v-card>
</template>

此组件没有样式部件。