Создание div той же ширины, что и у дедушки и бабушки ⇐ CSS

[Anonymous]

Я работаю над школьным проектом в React, цель которого — создать веб-сайт, на котором будут отображаться фильмы, собранные из базы данных. При нажатии на фильм под ним открывается небольшое окно с описанием. Проблема, с которой я столкнулся, заключается в том, что отображаемый блок имеет ту же ширину, что и блок фильма, тогда как я хочу, чтобы он занимал все пространство строки. Для иллюстрации см. изображение. Иллюстрация проблемы
вот часть моего кода, в которой возникла проблема. Он состоит из двух компонентов реагирования и CSS-файла

Код: Выделить всё

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 (

 {/* gx-4 ger horisontell space, gy-4 ger vertikal space */}






);
}

{/*

*/}
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) => (


[img]{`https://image.tmdb.org/t/p/original/${movie.details[[/img]
                            className="card-img-top img-fluid"
alt={movie.details["original_title"]}
onClick={() => handleMovieClick(movie.details.id)} // Klicka för att visa beskrivningen
/>


{movie.details["original_title"]}



{/* Shows description for the selcted movie */}
{selectedMovieId === movie.details.id && (


{movie.details["overview"]}


)}

))}
)
}

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

Я пробовал играть с установкой абсолютного положения описания фильма и left:0; и установите относительное положение .row, чтобы оно заполняло пространство. Это как бы исправляет ширину, немного не так, но не страшно. проблема, однако, в том, что остальные поля фильма оказываются поверх поля описания. Я считаю, что большая часть проблемы заключается в том, что поле описания в некотором смысле ограничено размером поля фильма, и поэтому это так проблематично. Это мой первый курс по веб-программированию, поэтому я в этом новичок. Любая помощь очень ценится.

Подробнее здесь: https://stackoverflow.com/questions/791 ... randparent