My current setup involves utilizing a grid layout to arrange elements in the z-direction. However, I have encountered an issue where a child element extends beyond the boundaries of the grid element:
#z-stack {
display: grid;
border: 5px solid green;
}
#z-stack > * {
grid-column-start: 1;
grid-row-start: 1;
}
#wide {
width: 111vw;
background: orange;
}
#tall {
height: 111vh;
}<div id="z-stack">
<div id="wide"></div>
<div id="tall"></div>
</div>The issue is evident as the green border fails to encompass the orange element completely, indicating that the child element surpasses the size constraints of the parent element. How can I adjust the parent element to expand adequately and contain all its child elements?