I was making carousel with react. This is my carousel component. i got data from server.

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>
  );
};

and this is my css file

.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%;
}

width with 100% As you can see, if i give 100% width to carousel container, it automatically limit my carousel items. regardless of width property of items However, if i changed container width as hard-coded value,

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

width with hard coded value It works well!!

What did i do wrong here? My logic was : i set width of video-items as 20vw, so whenever window size change, my items will have dynamic value according to their ratio. Because of video-items width, if i set container with as 100%, it will automatically expanded to cover all items. However, with overflow property, rest of videos will be hidden in window view.