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

Question

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

i have this code 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%

user_10229423 · Answer

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

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

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

1 Answers

Detailed explanation