Clip content inside div with another div - html

Question

I am working on some kind of drawing app.
There are elements inside a container div, and there is another div on top that should clip all the elements inside if it.
Here is the example: http://jsfiddle.net/n6m4n750/
The red rectangle "#clip must clip all the elements inside #container div, so any elements or part of an element that is outside of the #clip div, will be hidden.
How is it possible to do that?
Any help will be appreciated.

Answer 1

Add the following css to #clip:
box-shadow: 0px 0px 0px 25px white;
Here, the white shadow of the #clip overlaps the contents that need to be clipped which gives a clipping effect.
Here's a DEMO.

Answer 2

Not really posible to really clip it, as far as I know.
If your background is white, you can simulate the idea givind a huge white shadow around it
#clip {
position: absolute;
width: 300px;
height: 300px;
border: solid 2px red;
top: 50px;
left: 50px;
box-shadow: 0px 0px 0px 1000px white;
}
demo

Answer 3

Since you can't modify the html, i dont see a pure css solution. Maybe you could track the clipping with js.
const computeClip=function(target,mask){
let maskRect = mask.getBoundingClientRect();
let targetRect=target.getBoundingClientRect();;
let clip='rect('
+(maskRect.top-targetRect.top)+'px,'
+(maskRect.left+maskRect.width-targetRect.left)+'px,'
+(maskRect.top+maskRect.height-targetRect.top)+'px,'
+(maskRect.left-targetRect.left)+'px)';
target.style.clip=clip;
};
demo