Weird problem dealing with matching 100% height of parent, codepen included

So i have my html and body height and width set to 100%

Then i have its only childs width and height set to 100% quiz-board-container

Now if you look in my html i have a child of the container called directions-display.

I set the height and width to match its parent and it did match the width, but the height seems to stop right at th button? What is causing this? Why isnt it patching its parents height?? I cant figure it out.

Still trying to figure this out if anyone has any idea.

it looks like you haven’t verified your email address so codepen doesn’t want to show the full-page view to me.
You may want to right-click on the element you are having problems with and choose the ‘Inspect’ option then examine it to see what styling is being applied (is it what you expected to be applied)

I have, its applying the styling but its only matching the height of the parent up until its content.