'React, Nextjs, TailwindCSS. Scroll not working

I am facing a problem that in React Next.js, I am unable get the scroll bar vertically. This is my code:

        <div className=" hover:bg-violet-400 box-content overflow-y-scroll w-4000">
          <div ref={scrollRef}>
            {message.map((m) => (
              <Message
                message={m}
                own={m.sender === sender[0]._id}
              />
            ))}
          </div>
        </div>

I am using Tailwind Css in this project. The 'overflow-y-scroll' doesnt work. The overflow still happens even this property is empty.

reactjsscrollnext.jsscrollbartailwind-css


Solution 1:[1]

You need to define the height of your div to make your content scrollable inside it. And I just noticed you used w-4000 which is not a tailwind class. So change this as well.

Solution 2:[2]

You should remove w-4000 and add w-screen then If your content takes more space than the width, the vertical scrollbar will be available

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 Simran Singh
Solution 2 DeveloperRuwaid

Related Questions