Estoy creando una vista de lista plana para un sitio web de React. Esta es una foto de mi maqueta:

Tuve éxito en obtener esto:

A continuación, me gustaría limitar el tamaño de la lista plana y mostrar el overflow-x-scroll. El problema es que cuando pongo un tamaño, mi primera imagen tiene una visualización incorrecta...

Este es mi código (yo uso viento de cola):

 import React from "react"; export type CarrouselProps = { images: string[], size: number } const Carrousel: React.FC <CarrouselProps> = ({images, size}) => { return( <div> <div className="flex flex-row overflow-x-scroll w-[700px]"> {images.map(url => <input className={`w-[${size}px] h-[${size}px] mr-4 object-cover rounded-md`} type="image" src={url} /> )} </div> <div className="h-1 mt-3 bg-white w-[700px]"/> </div> ); } export default Carrousel;

¿Podría ayudarme a corregir esta visualización incorrecta en la primera imagen? Especifico que solo la primera imagen tiene visualización vertical.

Gracias de antemano por tu ayuda