如何实现主内容宽度适配侧边栏占用后剩余区域？Tailwind布局求助

我正在做一个侧边栏菜单，要求hover时变宽并重叠主内容。目前hover变宽的效果已经实现，但主内容无法根据屏幕剩余区域调整尺寸，导致居中布局失效，元素位置错乱，甚至在小屏幕下未hover时主内容会被侧边栏遮挡。期望主内容能基于侧边栏之外的剩余区域布局，正常使用flex居中定位。

修改后的代码实现 #

<div class="flex min-h-screen">
    <!-- 侧边栏 -->
    <aside class="fixed left-0 top-0 min-h-screen bg-gray-700 rounded-r-lg z-10">
        <div class="min-h-screen shadow-lg w-20 hover:w-56 duration-300 ease-in-out"></div>
    </aside>

    <!-- 主内容容器 -->
    <div class="flex-1 pl-20 mx-auto w-full">
        <div class="px-4 py-8">
            <div class="grid grid-cols-2 gap-4">
                <div class="border-2 h-full w-full">
                    container 1
                </div>
                <div class="border-2 h-full grid grid-rows-2">
                    <div class="border">
                        grid col 2 container 1
                    </div>
                    <div class="border flex-grow">
                        grid col 2 container 2
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关键修改说明 #

• 主内容容器添加pl-20：对应侧边栏默认宽度w-20，确保默认状态下主内容不会被侧边栏遮挡，同时设置w-full让主内容自适应剩余屏幕空间。
• 侧边栏添加z-10：提升层级，保证hover变宽时能覆盖在主内容上方，实现重叠效果。
• 主内容容器使用flex-1：在父级flex布局中占据剩余空间，配合mx-auto实现内容居中。

修改后，默认状态下主内容自动避开侧边栏宽度，小屏幕不会出现遮挡；hover侧边栏时，侧边栏变宽覆盖主内容，主内容布局不受影响，依然保持居中。

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