I have been stumped on this question for quite some time and can't seem to find an answer. I have a parent div with a child that also has children. Below is a screenshot with added borders. The Parent is in red, the child in blue, and the children of the child in yellow. I want the red box to clip the yellow boxes. However, overflow:hidden only applies to the first generation of children and therefore does not affect the yellow boxes.
here is the desired result
The project is also running on a codepen here
HTML
<div class='red'>
<div class='blue'>
<div class='yellow' />
<div class='yellow' />
</div>
</div>
CSS
.red {
overflow: hidden;
}
.blue {
position: absolute;
}
.yellow{
position: absolute;
}
I need this to work for absolute positioning, as this project is supposed to be the ground for visual scripting. All feedback is welcome!
