Question 236987 in Html Question posted in
Some basic documentation can be found here.

Html – Overflow scroll for multiple column with tailwind css

The problem below can be seen here – https://play.tailwindcss.com/D4nJ2xHpgp

I’ve got 7 columns for each day of the week. This currently half works, I want all columns to be the height of the screen, but the content of all columns scrollable (at the same time – not independently).

In the code example how it scrolls is correct, but the content goes beyond the borders. Any idea what I’ve done wrong?

Tags:

2

Answers


  1. 0 
    <div class="w-1/7 flex max-h-[calc(100vh-150px)] flex-row justify-between overflow-y-auto">
  <div class="flex h-full w-full grow flex-col items-center gap-2 border border-gray-300 p-1">
    <div class="flex w-full justify-center border-b">Monday</div>
    {...}
  </div>
  {...}
</div>

    To fix the problem you are facing u first need set a max height on container. After doing that u set the child element to take up full height. This causes the child content to take up whole space and overflow from parent making this scrollable. Since the child’s height is full, it’s border will be at bottom of scroll and its content won’t overflow from the border. Hope this helps!

    Login or Signup to reply.
  2. 0

    Overflow scrolling with flex columns in a flex row is tricky. Not saying it can’t be done but in your case it is easier to put it all in a wrapper that scrolls:

        <div class="h-[calc(100vh-150px)] overflow-y-auto border border-gray-300 ">
        <div class="flex flex-row justify-between w-1/7">
            <div class="flex grow items-center border border-gray-300 flex-col p-1 gap-2 w-full h-fit">
                {...}
            </div>
        </div>
    </div>

    EG:

    https://play.tailwindcss.com/nTwa6MiAe9

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search