'Tailwind using Overflow in a layout

So I'm new to tailwind and i am creating a simple app/layout which has a Navbar, Image Feed and Sidebar component.

So on the left side component it has a grid of images and I want it to be a scrollable.

My issues is overflow-y-auto doesnt work unless I add a fixed height like h-96 in the Image Feed component

Here is the tailwind code example I'm working on:

code snippet

<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>
csstailwind-css


Solution 1:[1]

Okay so try this snippet. You need to set height of the image feed container to h-screen and hide the overflow of the top level division.

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions