How to not display child div when outside parent d

Question

I'm trying to get a child div to not display when it overextends its parent's boundaries.
Like this:

The child div (red border) is bigger than the parent (blue border) and the parent "crops" it when it goes outside the parent's borders.

Note: I don't want the red border, it's just there to show how the child is bigger than the parent.

Is this possible?
Here's what I've got so far:

#contain {
  width: 300px;
  height: 200px;
  border: 1px blue dashed;
  background-color: rgba(60, 10, 10, .5);
  padding: 20px;
}

#big {
  width: 500px;
  height: 300px;
  border: 1px red solid;
  background-color: rgba(30, 30, 30, .5);
}

<div id='contain'>
  <div id='big'></div>
</div>

View on JSFiddle

Answer 1

just add overflow:hidden; to your style.

Answer 2

try to use this style:

#contain{
  width:300px;
  height:200px;
  border:1px blue dashed;
  background-color:rgba(60, 10, 10, .5);
  padding:20px;
  overflow:hidden;
}

Answer 3

Add overflow: hidden; to the parent div.

#contain{
  width:300px;
  height:200px;
  border:1px blue dashed;
  background-color:rgba(60, 10, 10, .5);
  padding:20px;
  overflow:hidden;
}

#big{
  width:500px;
  height:300px;
  border:1px red solid;
  background-color:rgba(30, 30, 30, .5);
}

<div id='contain'>
  <div id='big'>

  </div>
</div>