Typescript Vuetify v卡组件溢出-x不工作

在我的最新项目中，我使用Nuxt.js（v2.15.3）和Vuetify.js（v2.4.9）作为UI框架

我试图在v-card组件中使用overflow-x，但没有成功。 下面是我的简单测试代码

    <template>
  <div>
    <v-sheet>
      <v-row no-gutters>
        <v-col cols="4">
          <v-card height="200px" width="200px" class="scroll">
            <v-card-text>
              <v-treeview
                :items="items"
                item-key="id"
                item-name="name"
                item-children="child"
                open-all
              >
              </v-treeview>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col cols="8"></v-col>
      </v-row>
    </v-sheet>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue {
  items: any = [
    {
      id: 'test',
      name: '1stTree',
      child: [
        { id: 'Test#2', name: '2ndTree' },
        {
          id: 'test#2',
          name: '2ndTree',
          child: [
            { id: 'Test#2#3', name: '3rdTree' },
            {
              id: 'test#2#3',
              name: '3rdTree',
              child: [{ id: 'Test#2#3#4', name: '4thTreeTestTestTestTest' }],
            },
          ],
        },
      ],
    },
  ]
}
</script>
<style lang="scss" scoped>
.scroll {
  overflow: scroll !important;
}
</style>

从“nuxt属性装饰器”导入{Component，Vue}
@组件（{}）
导出默认类扩展Vue{
项目：任何=[
{
id:'测试'，
名称：“1stTree”，
儿童：[
{id:'Test#2'，name:'2ndTree'}，
{
id:“测试#2”，
名称：“第二棵树”，
儿童：[
{id:'Test#2#3'，name:'rdtree'}，
{
id:“测试2#3”，
名称：“第三棵树”，
子项：[{id:'Test#2#3#4'，名称：'4htreetest'}]，
},
],
},
],
},
]
}
.卷轴{
溢出：滚动！重要；
}

我想在v-card组件的底部添加滚动条， 但x轴滚动条是看不到的，只能看到我的示例照片下面的滚动条

感谢您的评论，我明白了为什么只在x轴上显示滚动条。 “overflow-x:scroll”强制滚动条始终显示。 我以为内容超过了容器的大小，但事实并非如此。 如果我看到内部滚动条，我应该怎么做？ 是否可以使用“溢出：自动”？ 如果可能的话，我不想使用“overflow-x:scroll”强制显示滚动。

---

有人给我建议吗？

你有什么问题吗？从html继承的

内
溢出-x:hidden
不会应用于您的v卡。
.scroll[data-v-0129536c]
中的样式为，因此当您需要滚动条时，滚动条应按您的要求显示。正在应用该样式。这就是为什么
overflow-x:hidden
是不透明的。这意味着它没有被应用。切换到chrome浏览器中的
computed
选项卡，而不是
style
选项卡，然后键入
overflow
，查看实际应用到v卡的内容。因为您将其设置为
auto
，这意味着“当内容超过容器大小时，显示滚动条。”您需要将其设置为
溢出：滚动或
溢出-x：滚动强制滚动条始终显示。FYI
overflow-x：滚动
将强制滚动条始终显示，但如果内容未超过容器的大小，则您将看不到内部滚动条，因为当前正在显示所有内容。您可能需要在
v-card-text
上设置一个固定宽度，该宽度大于
v-card
的宽度。或者您可以尝试添加
空白：nowrap到
v-card-text
以便
v-card-text
组件中的文本保持在一行。这里有一些例子。