外部父div边界时如何不显示子div

Question

我试图让孩子div在其父母的边界过度扩张时不显示。现在我结束了这个：JSFIDDLE

我想要得到这样的东西：

您可以看到孩子div（以红色为边框）比父母（蓝色边框）大，而父母“庄稼”＃39;当它超出父母的borders时。

注意：我不想让红色边框显示到最后，它只是显示孩子的大小比父母大。

这可能吗？谢谢你的帮助！

Answer 1

尝试使用这种风格：

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

Answer 2

将overflow: hidden;添加到父div。

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将overflow:hidden;添加到您的样式中即可。