'Css, how to give an element the same height and width as its parent

how to give an element the same height and width as its parent.

i have this code html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style-home.css">
    </head>
    <body>
        <section id="section-home">
            <video autoplay="" muted="" loop="" id="video-background-home"> 
                <source src="../../multimedia/video/background-home.mp4" type="video/mp4">
            </video>

            <div id="container-text-home">
                <p id="text-title-home">Test</p>
                <p id="text-subtitle-home">Test</p>
            </div>
        </section>
        
    </body>
</html>

The container-text-home must have the same height and width of the "section-home".

The size of "section" depends on the relative size of the video tag inside it.

The video size is: width: 100%

htmlcss


Solution 1:[1]

If I understand correctly what you're trying to do, I think this would do the trick :

#section-home {
  background-color: green;
  display: flex;
  flex-direction: column;
  width: fit-content;
}

#video-background-home {
  width: 400px;
  background-color: red;
}

#container-text-home {
 background-color: blue;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style-home.css">
    </head>
    <body>
        <section id="section-home">
            <div id="video-background-home"> 
              video
            </div>

            <div id="container-text-home">
                <p id="text-title-home">Test</p>
                <p id="text-subtitle-home">Test</p>
            </div>
        </section>
        
    </body>
</html>

Detailed explanation

display: flex;
flex-direction: column

This makes section-home a Flex container. Flexbox is a tool for allocating space between children inside the flex element. In our case, this allows the container-text-home element to grow veritcally to fill the space

      width: fit-content;

This makes the parent container fit the width of the video. This works because the video here has an explicit width.

The container-text-home automatically strech to fill the cross-axis. This is the default behavior

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Araelath

Related Questions