Here is a codepen with the general problem:
Switch the percentage values to vh based values,
This is because percentage values are relative to parent container, and what you are trying to achieve is relative to viewport size (you can simply replace the
height: 100% of the
html, body attributes by a
min-height: 100%, but the canevas won't take 100% of the page if the red box is small, it will just adapt to it.