如何修复Tailwind布局中侧边栏与内容堆叠而非左右排列的问题

你遇到的侧边栏和内容区上下堆叠的问题，核心原因是包裹这两个模块的父容器仅设置了flex-row指定弹性方向，没有添加flex类开启弹性布局，子元素仍为默认块级元素的上下流式排布。

修正后代码 #

<div class="bg-gray-600 flex flex-col min-h-screen">
    <div>
        <app-course-info-home></app-course-info-home>
    </div>
    <div class="flex flex-row flex-1">
        <div class="bg-yellow-200 max-w-min flex-col max-h-screen" id="course-sidebar">
            <app-course-sidebar></app-course-sidebar>
        </div>
        <div class="bg-blue-500 flex-1" id="module-display">
            <app-module-display></app-module-display>
        </div>
    </div>
</div>

关键修改说明 #

• 为侧边栏+内容区的父容器新增flex类，开启弹性布局后子元素会自动横向排列
• 调整两个模块的代码顺序，将侧边栏放在内容区前面，实现侧边栏靠左、内容区在右侧的布局
• 为侧边栏添加max-h-screen类，满足高度要求
• 为内容区添加flex-1类，使其自动占满侧边栏之外的所有横向剩余空间，适配不同尺寸的屏幕
• 可选优化：将最外层容器的max-h-min替换为min-h-screen，可让页面整体占满视口高度，避免内容过短时出现布局高度不足的问题

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