Vuetify Grid 系统在我的对话框中添加水平滚动条

Question

美好的一天。我有以下对话框，每当我在它的组件中添加任何内容时，就会出现一个水平滚动条，并且我的对话框右侧突然在右侧有一个 space。就像在参考图片中

这就是我拥有的所有代码：

我的看法：

<template>
<v-main>
    <v-dialog
    v-model="dialog"
    >
        <v-card background-color="white">
            <div>
                <myComponent/>
            </div>
        </v-card>
    </v-dialog>
    <v-container>
     // rest of my code
    </v-container>
 </main>
 </template>

我的组件：

<template>
        <v-main>
            <v-row align='center' justify="center">
                <v-col class="d-flex justify-center" cols="5">
                    hello
                </v-col>
            </v-row>   
        </v-main>
</template>

为什么会这样。每个页面我都有挖出的样式，其中大部分甚至没有应用任何 css。当我删除“hello”和 v-col 标签时，对话框恢复正常，如下所示：

Answer 1

将 style="overflow-x: hidden;" 添加到环绕 <myComponent/>

的 div

Vuetify Grid 系统在我的对话框中添加水平滚动条

Vuetify Grid system adding a horizontal scroll bar in my dialog

grid

dialog

vuetify.js