<ul className="flex flex-wrap justify-between w-full">
    {pic.map((pic, index) => (
      <li key={index}>
        {" "}
        <div className="avatar  p-2 cursor-pointer">
          <div className="w-[100px] h-[100px] rounded-full bg-orange-50">
            <img
              src={pic.picture!}
              alt=""
              style={{ maxWidth: "100%", maxHeight: "100%" }}
            />
          </div>
        </div>
      </li>
    ))}
  </ul>

I have this one. I am trying to fit every item to one row without scrolling. if it is 10 then make it smaller than when it is 5 to fit every items to the screen width to display everything.

I could not make it work. The items keep going off the screen and making it scroll without shrinking the size to fit into one.