Making div the same width as grandparent

I am working on a school project in react where the goal is to build a website which will display movies collected from a database. When a movie is clicked a small description box is opened underneath. The problem I’m having is that the box that appears is the same width as the movie box, whereas I want it to take up the full space of the row. See image for illustration.Ilustration of problem
here is the part of my code that has the problem. It is consisting of two react components and a css file

type here
import { useState } from 'react';
import FilmBild from './assets/filmBild.jpg';
import SingleMovieGridElement from "./SingleMovieGridElement.jsx";

function MovieGrid() {

    const [selectedMovieId, setSelectedMovieId] = useState(null);

    const handleMovieClick = (movieId) => {
        if (selectedMovieId === movieId) {
            setSelectedMovieId(null); // Om samma film klickas igen, stäng av beskrivningen
        } else {
            setSelectedMovieId(movieId);
        }
    };

    return (
        <div className="container">
            <div className="row gx-4 gy-4"> {/* gx-4 ger horisontell space, gy-4 ger vertikal space */}

                <SingleMovieGridElement handleMovieClick={handleMovieClick} selectedMovieId={selectedMovieId} />
                <div className="card mt-2 movie-description">

                </div>

            </div>
        </div>
    );
}



{/*

*/}
export default MovieGrid;

import { useOutletContext } from 'react-router-dom';
import { useLoaderData } from 'react-router-dom';
//import {useState} from "react";


function SingleMovieGridElement({handleMovieClick, selectedMovieId}) {

    //const [handleMovieClick, selectedMovieId] = useOutletContext()

    const movies = useLoaderData();
    console.log("filmer")
    console.log(movies)

    return(

        <>

        {movies.map((movie) => (
                <div key={movie.details.id} className="col-lg-4 col-md-6 col-sm-12">
                    <div className="card">
                        <img
                            src={`https://image.tmdb.org/t/p/original/${movie.details["poster_path"]}`}
                            className="card-img-top img-fluid"
                            alt={movie.details["original_title"]}
                            onClick={() => handleMovieClick(movie.details.id)} // Klicka för att visa beskrivningen
                        />
                        <div className="card-body">
                            <h5 className="card-title"
                                style={{ fontSize:'1rem' }}>
                                {movie.details["original_title"]}</h5>
                        </div>
                    </div>

                    {/* Shows description for the selcted movie */}
                    {selectedMovieId === movie.details.id && (
                        <div className="card mt-2 movie-description">
                            <div className="card-body">
                                <p>{movie.details["overview"]}</p>
                            </div>
                        </div>
                    )}
                </div>
            ))}
    </>)
}

export default SingleMovieGridElement;

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}


.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 350px; 
}

.card-img-top {
  max-height: 200px;
  object-fit: cover; 
}

.card-body {
  flex: 1; 
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.card-title {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: normal; 
  height: 50px;  
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
}

.card-body p {
  flex: 1;
  font-size: 0.875rem;
  color: #666;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: normal; 
  height: 70px; 
}



.movie-description {
  width: 100%; 
  height: 300px; 
  overflow-y: auto; 
}

.row {
  position: relative;
}

I have tried playing with setting the position of movie-description to absolute and left:0; and setting the position of .row to relative so that it fills the space. This kind of fixes the width part, it’s a little off but not terrible. the problem however is that the rest of the movie boxes ends up on top of the description box. I believe that a large part of the problem is that the description box is contained by the size of the movie box in some sense and therefore it’s so problematic. This is my first course in web programming som I’m very new to this. Any help is very much appreciated.

You need to sign in to view this answers