Search code examples
next.jstailwind-css

The image component shrinks the width and height to fit everything into the screen width not making it scrollable

As the number of items increases, the image shrinks. How can I make sure the image's width and height are 500px and make sure it scrolls horizontally?

<ul className="flex flex-row w-screen overflow-x-auto">
  {data.map((item, index) => (
    <li key={index} className="w-500">
      <Image src={data.pic} width={500} height={500} alt="" />
    </li>
  ))}
</ul>
Solution

  • Add shrink-0 to the list items to prevent the items from shrinking. So something like:

    <li className="w-500 shrink-0">