Angular how to prevent a Child Template from scrolling in a Parent Template

Question

I've had this issue ever since I've worked with Angular and it's annoying. For instance if I have a child template that I am putting in a Parent Component sometimes but not always the child component template will scroll within itself instead of loading the entire page inside the parent.

I have seen some similar issues but I have been unable to resolve the issue and does not look like an easy resolution. Any info would be helpful if anyone else has had similar problems

from the below picture you can see that the child HTML Template is being cut off and is only scrolling within itself instead of loading the entire view in the parent. This does not always happen though

Answer 1

I figured it out, I had wrapping my component HTML which is used for dialogs with Material Design to help with scrolling. Thanks.

Answer 2

You must wrap the component in a div and give that div some height.

Like here