Apply height 100% to all parent elements

I'm trying to get a div in the homepage to fill 100% of the height it can occupy. I've tried different solutions like applying height: 100% to the body or all the divs etc. but none of it worked.

A solution would be appreciated.

Thanks in advance.

[EDIT]
I applied height: 100% to #__docusaurus and that solved the height but now it does this: https://i.sstatic.net/TohTP.png

Solution

Solved. I didn't use the height 100% but I applied the following css:

.parent { // For docusaurus/me its .main-wrapper
  display: flex;
  flex-direction: column;
}

.child { // For me its the feature section that can be seen in the images posted
  flex-grow: 1
}

I also removed the height: 100% from the child and parent