How to not display child div when outside parent div border

问题

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

回答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;
}

回答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>

回答3:

just add overflow:hidden; to your style.

来源：https://stackoverflow.com/questions/36005898/how-to-not-display-child-div-when-outside-parent-div-border