How to not display child div when outside parent div border

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)

Answer 1

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 2

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>

Answer 3

just add overflow:hidden; to your style.