overflow-x doesn’t scroll horizontally, only vertically

I’ve read 100 posts and even completely scrapped my code and made a whole different component but for the life of me, I can’t get this to scroll horizontally.

This is currently what it looks like:

import classes from "./trending.module.css";

const Trending = ({ trendingMovies }) => {
  const trendingMoviesResults = trendingMovies.results;

  return (
    <div className={classes.trendingTopContainer}>
      <h1 className={classes.heading}>Trending</h1>
      <ul className={classes.trendingMoviesContainer}>
        {trendingMoviesResults.map((trendingMovie) => (
          <Movie
            key={trendingMovie.id}
            movieId={trendingMovie.id}
            moviePoster={trendingMovie.poster_path}
            alt={trendingMovie.overview}
          />
        ))}
      </ul>
    </div>
  );
};

export default Trending;

The CSS for this is:

.trendingTopContainer {
    max-width: 100%;
    max-height: 15em;
    display: block;
}

.trendingMoviesContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 15em;
    overflow-y: hidden;
    overflow-x: scroll;
}

The movie component:

import Link from "next/link";
import classes from "./movie.module.css";
import Image from "next/image";

const Movie = ({ alt, moviePoster }) => {
  // this is an alternative option for now..
  const imageUrl = `https://image.tmdb.org/t/p/original/${moviePoster}`;

  return (
    <li className={classes.movieContainer}>
      <Link href={""} className={classes.imageContainer}>
        <Image src={imageUrl} width={240} height={470} alt={alt} />
      </Link>
    </li>
  );
};

export default Movie;

Which has this CSS:

.movieContainer {
    height: 15em;
    width: 300px;
}

So what have I tried so far? I tried to remove all of the code and use extremely default styles taken from w3c schools but that didn’t work. So I’m completely lost at this point. I’ve applied overflow-x/y to every possible div/container in any shape that I’ve used but for some reason I can’t get it to work so would appreciate some guidance as I know that the child should exceed the size of the parent to create the overflow but as noted, I can’t seem to get the effect I want.

I basically want to have a horizontal scroll so you can see each movie poster in a row but each time I’ve applied the styles, it only works for a vertical scroll. I know this may be a duplicate but I just can’t sort this one out lol. I have changed the figures of the containers but still haven’t managed to get this to work.

flex-direction: column; made the movie components specifically go horizontally rather than in a row resulting in a fix for the issue.