Make Child only as large as Parent without constraining Parent in CSS

Question

I have a page layout like seen below. The whole page is wrapped in a div with these properties:

grid-template-columns: 4rem 1fr
grid-template-rows: 4rem 1fr
h