非全屏状态下页面右侧出现莫名空白边距（Nuxt/TailwindCSS）

我用Nuxt、Vue3和TailwindCSS制作了一个简单的CV页面，浏览器全屏状态下显示正常，元素适配良好；但切换到非全屏状态后，页面主体右侧会出现莫名的空白边距。检查父元素布局后，未发现会影响子元素的内边距或外边距，且我仅使用Tailwind默认类，按常理不应出现该问题。

相关代码（default.vue） #

<template>
    <div class="container flex p-4 flex-col h-screen overflow-hidden bg-slate-200">
        <div class="pb-2 bg-gradient-to-r from-red-500 via-green-500 to-purple-500">
            <header class="bg-slate-200 pb-2">
                <nav>
                    <ul class="flex justify-end gap-5">
                        <NuxtLink to="skills" class="rounded-lg border-black border-solid border-2 p-3">
                            <li>Key Skills & Interests</li>
                        </NuxtLink>
                        <NuxtLink to="education" class="rounded-lg border-black border-solid border-2 p-3">
                            <li>Education</li>
                        </NuxtLink>
                        <NuxtLink to="experience" class="rounded-lg border-black border-solid border-2 p-3">
                            <li>Experience</li>
                        </NuxtLink>
                        <NuxtLink to="about" class="rounded-lg border-black border-solid border-2 p-3">
                            <li>A Little Bit About Me</li>
                        </NuxtLink>
                    </ul>
                </nav>
            </header>
        </div>

        <slot />
    </div>
</template>

解决方案尝试 #

1. 替换container类为w-full
   Tailwind的container类默认是用于居中固定宽度的内容容器，会在不同断点下设置最大宽度和左右边距，这可能是导致非全屏时右侧出现空白的核心原因。把最外层容器的container换成w-full，让容器直接占满整个窗口宽度：

<div class="w-full flex p-4 flex-col h-screen overflow-hidden bg-slate-200">

2. 检查插槽内容是否存在溢出元素
   如果替换container后问题仍存在，检查<slot />中插入的页面内容，是否有元素设置了固定宽度（比如w-[1200px]）或禁用了收缩属性（flex-shrink-0）——这类元素在窗口变窄时会超出容器宽度，进而导致视觉上出现右侧空白。

3. 添加横向溢出隐藏
   给最外层容器额外添加overflow-x-hidden类，强制隐藏横向方向的溢出内容，避免因元素溢出产生滚动条或空白区域：

<div class="w-full flex p-4 flex-col h-screen overflow-hidden overflow-x-hidden bg-slate-200">

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