flex row exceeding page width, text-overflow: ellipsis not working

Question

my apps flex capabilities have changed since adding some code.

In my MovieContainer ideally I want the flex-direction to be row (it's currently set to column) and only the width of the page and then to start again on the next column ideally 6 across. But when set to row it goes outside the scope of my page.

Also since adding this new code the text-overflow on my MovieName is now exceeding its width and overflow is no longer hidden. I feel like I've effected these styled components somehow although when I change the font-size it works fine.

Styled Components:

const MovieContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 280px;
  box-shadow: 0 3px 10px 0 #aaa;
  cursor: pointer;
`;
const CoverImage = styled.img`
  height: 362px;
`;
const MovieName = styled.span`
  font-size: 18px;
  font-weight: 600;
  color: black;
  margin: 15px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
`;
const InfoColumn = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;
const MovieInfo = styled.span`
  font-size: 12px;
  font-weight: 500;
  color: black;
  text-transform: capitalize;
`;

Rest of the code:

const MovieComponent = () => {
  const [filmWorld, setFilmWorld] = useState([]);
  const [cinemaWorld, setCinemaWorld] = useState([]);

  useEffect(() => {
    const theaters = ["cinema", "film"];
    theaters.forEach((theater) => {
      async function fetchCinema() {
        const data = await api.getFilm(theater);
        if (data.Provider === "Film World") {
          console.log("FILM WORLD: ", data.Provider);
          console.log(`Data ${theater}World: `, data);
          setFilmWorld(data);
        } else {
          console.log("CINEMAWORLD: ", data.Provider);
          console.log(`Data ${theater}World: `, data);
          setCinemaWorld(data);
        }
      }
      fetchCinema();
    });
  }, []);

  const movies = useMemo(() => {
    if (!filmWorld.Provider) return [];
    return filmWorld.Movies.map((movie, index) => ({
      ...movie,
      cinemaWorldPrice:
        cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price,
    }));
  }, [filmWorld, cinemaWorld]);

Since making changes to the below code the styling seems to go out of wack. This is where the styled components are called:

return (
        <MovieContainer>
          {movies.map((movie, index) => (
            <div className="movies" key={index}>
              <MovieName>{movie.Title}</MovieName>
              <CoverImage src={movie.Poster} alt={movie.Title} />
              <InfoColumn>
                <MovieInfo>Filmworld Price: ${movie.Price}</MovieInfo>
                <MovieInfo>Cinemaworld Price: ${movie.cinemaWorldPrice}</MovieInfo>
              </InfoColumn>
            </div>
          ))}
        </MovieContainer>
      );
    };
    
    export default MovieComponent;

Answer 1

If I understood you correctly this is what you trying to achieve:

If that is the case all you have to do is add this line:

const MovieContainer = styled.div`
  .
  .
  .
  flex-direction: row;
  flex-wrap: wrap;
`;