Tailwind如何让<main>内白色div占满剩余高度且宽度不收缩

解决方案 #

你遇到的宽度收缩问题是因为列方向flex容器的直接子元素默认宽度为内容自适应，只要补充宽度类即可解决，修改后的完整代码如下：

<div class="min-h-screen bg-red-100 flex flex-col">
    <nav class="h-16 bg-yellow-100">
        <div class="max-w-7xl mx-auto">
            <p>Nav goes here.</p>
        </div>
    </nav>
    <main class="flex-grow flex flex-col">
        <div class="max-w-7xl mx-auto bg-white w-full flex-grow">
            <div>Content goes here</div>
        </div>
    </main>
</div>

改动说明 #

• 给<main>添加flex flex-col类，将其转换为列方向的flex容器，支持内部元素垂直方向分配空间
• 给白色背景的<div>添加w-full类，强制该元素宽度占满父容器的100%，避免宽度收缩到内容宽度
• 保留原有的max-w-7xl和mx-auto，依然会限制最大宽度为7xl、保持水平居中，不会出现宽度超出的问题
• 给白色背景的<div>添加flex-grow类，使其占满<main>容器内的所有剩余垂直空间，符合高度要求

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