Nuxt/Tailwind项目中Flickity轮播溢出导致横向滚动如何解决

偶发横向滚动的核心原因是轮播容器的实际计算宽度超出了父容器/视口的可展示范围，结合你的使用场景，可按优先级尝试以下方案：

• 优先给外层网格容器加横向溢出隐藏兜底，直接截断溢出内容避免滚动，修改后的代码如下：

<template>
  <div class="grid grid-cols-12 overflow-x-hidden">
    <CarouselBase class="pl-95 col-start-2 col-span-11" >
        <ResourceCard
            v-for="(item, itemIndex) in items"
            :key="itemIndex"
            v-bind="item"
            class="mr-2"
        />
    </CarouselBase>
  </div>
</template>

• 调整Flickity组件配置，开启宽度自适应和边界适配：在CarouselBase组件内部初始化Flickity的配置项中增加两个参数，确保窗口尺寸变化时自动重新计算轮播宽度，且首尾卡片不会超出容器边界：

// Flickity 初始化配置
const options = {
  // 保留你的原有配置
  contain: true, // 强制轮播内容不超出容器边界
  resize: true // 窗口 resize 时自动重新计算尺寸
}

• 修正轮播容器的盒模型计算：给CarouselBase追加w-full box-border类，强制轮播容器宽度适配所属网格列的宽度，同时保证左内边距pl-95不会额外撑宽容器：

<CarouselBase class="pl-95 col-start-2 col-span-11 w-full box-border" >

• 全局兜底：如果仍有偶发的页面级横向滚动，可在Nuxt项目根布局（app.vue）的根节点或者全局样式中给body、html标签加overflow-x: hidden属性，彻底禁止页面横向滚动。

内容的提问来源于stack exchange，提问作者Maxime