全高顺风<main>部分

Question

这是我的 HTML：

<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">
        <div class="max-w-7xl mx-auto bg-white">
            <div>Content goes here</div>
        </div>
    </main>
</div>

在大屏幕上，我有一个黄色的nav 全宽，中间有一个容器 (max-w-7xl)。

<main> 元素占据了剩余的屏幕空间，并在顶部中心有一个白色背景的容器。

我的问题是，如何让白色元素（div）占据剩余的高度？我尝试将它包装在它自己的列 flex 容器中，并告诉白色 div 增长。这行得通，只是白色 div 的宽度随后缩小到最小值。

Answer 1

我试过了，这段代码运行正常

<main class="flex flex-grow">
   <div class="bg-white flex-1">
       <div>Content goes here</div>
   </div>
</main>