I can't set the child div to be the height and width of the parents element

1

https://codepen.io/hawkish/pen/eYJjevN

The main problem here is on the #overlay
Despite setting the width and height to be 100%, I can’t get it to be the same width and height as my parents element.

What am I doing wrong? Any help is appreciated

2

The parent element is a flex container with this value:

  padding: 8rem;

So the element is taking 100% of the remaining space, which is not much.

Comment
You might accomplish your goal by removing the padding on the parent and setting a fixed height and width on the children’s class, though I can’t guarantee that will solve all the issues. It’s trial and error.

1 Like
3

Thanks for the help, I fixed with align items center. Don’t know why but
It is what it is lol

4

you gonna make that browser explode. joke. nice you got that fixed.

I don’t mind to take another look at the code later on, if you’d like to, just remind me w a message.

1 Like
5

Then I’ll take you up on my offer sir, but it’ll be awhile till I finish it. Thanks again, cheers