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

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;
`;