Consider a scenario where there are 3 different divs named grandParent, Parent, and Child. Although the parent's tag is placed inside the grandParent, due to the use of position: absolute; property, the parent ends up being displayed outside the grandParent. Now, if we have a child div with height and width set to 100%, it will also render outside the grandparent container. How can we ensure that the child div is only rendered inside the grandParent? The goal here is for the green div (child) to be completely contained within the red div (parent), while allowing the yellow div (parent) to partially extend beyond the boundaries of the red div.
<html>
<head>
<style>
.grandParent {
width: 600px;
height: 700px;
background-color:red;
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(417px, -88px) rotate(
0deg
);
}
.child {
height: 275px;
background-color: green;
}
</style>
</head>
</head>
</head>
<body>
<div class="grandParent">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>