Overflow scroll doesn't work on tailwind css

Question

I can see that scrollbar on x-axis.

But, when using mouse wheel on that section it didn't work..

If you know, please help me ..

This is my code

 <div className="flex space-x-3 overflow-scroll p-3 -ml-3">
            {cardsData?.map(({ img, title }) => (
              <MediumCard key={img} img={img} title={title} />
            ))}
          </div>

and mediumCard code

const MediumCard = ({ img, title }) => {
  return (
    
    <div className="cursor-pointer transform transition hover:scale-105 duration-300 ease-out ">
      <div className="relative h-80 w-80">
        <Image src={img} layout="fill" className="rounded-xl" />
      </div>
      <h3 className="text-2xl mt-3">{title}</h3>
    </div>
  );
};

Horizontal scroll on mousewheel is not a native behavior. If you want that you'll need some JS or you could use this hack and adapt it to Tailwind css-tricks.com/pure-css-horizontal-scrolling — JHeth
– JHeth, Commented Nov 22, 2021 at 22:06

Saidur Rahman · Accepted Answer · 2022-09-16 09:47:52Z

1

Please add width and height to this

 <div className="w-[100vw] flex space-x-3 overflow-scroll p-3 -ml-3">
        {cardsData?.map(({ img, title }) => (
          <MediumCard key={img} img={img} title={title} />
        ))}
      </div>

answered Sep 16, 2022 at 9:47

Saidur Rahman

241 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D_Edet Over a year ago

Width & Height important. Thanks

AlxVallejo Over a year ago

Where are you adding height here?

Collectives™ on Stack Overflow

Overflow scroll doesn't work on tailwind css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related