侧边栏显示时contents区域水平滚动冲突修复问询

当为contents区域添加overflow-x-auto以实现水平滚动时，表格会溢出contents区域，滚动条出现在视口而非contents内。该问题仅在sidebar以display:block状态显示时出现，移动端或移除侧边栏时滚动功能正常。

说明1：这是我能精简到的最简代码版本。

说明2：要完整查看问题，运行代码片段时可能需要点击全屏并放大页面。

复现代码 #

<script src="https://cdn.tailwindcss.com/3.4.14"></script>
<body class="font-sans antialiased">
    <div class="flex h-screen bg-red-50 dark:bg-red-900">
        <!-- sidebar -->
        <aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
            <div class="py-4 text-gray-500 dark:text-gray-400">
                <a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200">
                    APP
                </a>
            </div>
        </aside>

        <!-- contents -->
        <div class="flex flex-col flex-1 w-full">
            <main class="h-full overflow-y-auto">
                <div class="py-12">
                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                        <div class="bg-blue-50 overflow-hidden shadow-sm sm:rounded-lg overflow-x-auto max-w-full">
                            <div class="p-6 text-gray-900">
                                <table class="table-fixed w-full">
                                    <thead>
                                        <tr class="bg-gray-100">
                                            <th class="px-4 py-2 w-20">No.</th>
                                            <th class="px-4 py-2 w-52">Name</th>
                                            <th class="px-4 py-2 w-52">Address</th>
                                            <th class="px-4 py-2 w-44">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="border px-4 py-2">1</td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                name1
                                            </td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                address 1
                                            </td>
                                            <td lass="border px-4 py-2 flex gap-2 items-center justify-between">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="border px-4 py-2">1</td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                name 2
                                            </td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                address 2
                                            </td>
                                            <td lass="border px-4 py-2 flex gap-2 items-center justify-between">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>

修复方案 #

问题根源是max-w-7xl这个固定最大宽度类，在侧边栏显示时，它没有适配内容区的剩余宽度，导致内部滚动容器无法正确约束宽度，从而溢出到视口。

你可以通过以下两种方式修复：

• 方法1：调整外层容器的宽度约束
  将带有max-w-7xl mx-auto的父容器的max-w-7xl替换为max-w-full，让它完全适配内容区的可用宽度：

  <div class="max-w-full mx-auto sm:px-6 lg:px-8">
  

• 方法2：给内容区外层添加溢出隐藏
  给内容区的最外层容器添加overflow-hidden类，限制内部元素的溢出范围：

  <div class="flex flex-col flex-1 w-full overflow-hidden">
  

两种方法都能解决侧边栏开启时的滚动问题，推荐方法1，因为它更贴合响应式布局逻辑，不会限制内容的正常显示范围。

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