溢出滚动在顺风 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>
  );
};

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