在布局中使用Overflow顺风

Question

所以我是新的顺风，我正在创建一个简单的应用程序/布局，它有一个导航栏，图片源和栏组件。

左侧组件有一个图像网格我希望它是可滚动的

我的问题是overflow-y-auto不工作，除非我添加一个固定的高度，如h-96在图片提要

组件下面是我正在编写的顺风代码示例:

<<p>代码片段/strong>

<div class="flex h-screen w-screen bg-blue-400">
<div class="flex flex-auto flex-col">
<div class="flex items-center space-x-3 p-4 text-white">
<div class="flex">
<button class="text-royal-blue h-12 w-12 rounded-full bg-white text-xl"></button>
</div>
<div class="text-2xl">NAVBAR</div>
</div>
<div class="flex flex-row bg-red-200 flex-auto">
<div class="flex flex-auto overflow-y-auto"> 
<div class="grid w-full grid-cols-2 gap-2">
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
</div>
</div>
<div class="w-1/4 bg-green-300">SIDEBAR</div>
</div>
</div>
</div>

Answer 1

好，试试这个片段。您需要将图像输入容器的高度设置为h-screen，并隐藏顶层划分的溢出

<div class="flex h-screen w-screen overflow-y-hidden bg-blue-400">
<div class="flex flex-auto flex-col">
<div class="flex items-center space-x-3 p-4 text-white">
<div class="flex">
<button class="text-royal-blue h-12 w-12 rounded-full bg-white text-xl"></button>
</div>
<div class="text-2xl">NAVBAR</div>
</div>
<div class="flex flex-auto flex-row bg-red-200">
<div class="flex h-screen flex-auto overflow-y-auto">
<div class="grid w-full grid-cols-2 gap-2">
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
</div>
</div>
<div class="w-1/4 bg-green-300">SIDEBAR</div>
</div>
</div>
</div>