CSS, Flexbox sizing issue. Can someone please explain what is going on?

Hi I am trying to make a netflix clone and have everything working the way I want but I am having an issue with the layout. No matter how I set the width of the div which contains the images they aren't changing. I've used the console and no rule seems to be in place that would prevent them from growing. I have set the images to 100% the width of their parent container but this makes them tiny.

I really struggle with CSS because there is no console telling you what is going wrong. If someone could take a look and help me understand I would greatly appreciate it. (Also, does anyone know how long it takes to stop feeling like an idiot when dealing with CSS?)

I have included code below. the row__imgLarge is only applied on one particular row. This is having the same issue as the others.

<div className="row__images">
    {movies.map((movie) => (
      <div
        className={`row__imgContainer  ${
          isLargeRow ? "row__imgLarge" : ""
        }`}
        key={movie.id}
        onClick={() => handleClick(movie)}
      >
        <img
          className="row__image"
          // {some movies don't have the a backdrop image, in these cases use poster instead}
          src={`${base_url}/${
            isLargeRow || !movie.backdrop_path
              ? movie.poster_path
              : movie.backdrop_path
          }`}
          alt={movie?.title || movie?.name || movie?.original_name}
        />
      </div>
    ))}

.row__images {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}

.row__imgContainer {
  /* width: 15.8vw; */
  max-height: 40vh;
  width: 150vw;
  margin-right: 0.6vw;
}

.row__image {
  width: 100%;
  transition: transfrom 440ms;
}

.row__imgLarge {
  max-height: 40vh;
}

Flex items' (children of a flex container) widths are dictated by the flex container. You need to control them with flex properties. Look at justify-content on the container, and flex-grow, flex-shrink, and flex-basis on the items.

If you want the items at a specific unchanging width, for example, you'd set grow and shrink to 0, and basis to the desired width:

.row_imgContainer {
  flex-grow: 0; /* don't grow */
  flex-shrink: 0; /* don't shrink */
  flex-basis: 200px; /* desired width */
}

.row_imgContainer {
  flex: 0 0 200px; /* shorthand, same as above */
}

If you just want a horizontally-scrolling row of images, set overflow: auto (or scroll) on the flex container and don't let the items shrink:

.container {
  display: flex;
  overflow-x: auto;
  max-width: 500px;
}

.container>* {
  flex: 0 0 200px;
}

<div class="container">
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/201" />
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/199" />
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/202" />
  <img src="//placekitten.com/204" />
</div>