Estaba haciendo carrusel con reaccionar. Este es mi componente de carrusel. Tengo datos del servidor.

 const VideosRow = (props) => { return ( <Fragment> <div className={classes["video-carousel"]}> {props.data.map((video) => { return ( <div className={classes["video-items"]}> <Video key={video._id} image={video.overviewThumbSrc} /> </div> ); })} </div> </Fragment> ); };

y este es mi archivo css

 .video-carousel { display: flex; overflow: hidden; padding-left: 4rem; height: 14.9rem; width: 100%; } .video-items { position: relative; width: 20vw; height: 100%; margin-left: 0.5rem; } .video-items img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; }

ancho con 100% Como puede ver, si doy 100% de ancho al contenedor del carrusel, automáticamente limita mis elementos del carrusel. independientemente de la propiedad de ancho de los elementos. Sin embargo, si cambié el ancho del contenedor como valor codificado,

 .video-carousel { display: flex; overflow: hidden; padding-left: 4rem; height: 14.9rem; width: 130rem; }

ancho con valor codificado ¡Funciona bien!

¿Qué hice mal aquí? Mi lógica era: configuré el ancho de los elementos de video en 20vw, por lo que cada vez que cambie el tamaño de la ventana, mis elementos tendrán un valor dinámico de acuerdo con su proporción. Debido al ancho de los elementos de video, si configuro el contenedor como 100%, se expandirá automáticamente para cubrir todos los elementos. Sin embargo, con la propiedad de desbordamiento, el resto de los videos se ocultarán en la vista de ventana.