在父div边界之外时如何不显示子div [英] How to not display child div when outside parent div border

问题描述

我正在尝试让子级 div 在其超出父级边界时不显示.
像这样:

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

子级 div (红色边框)大于父级(蓝色边框)，当父级超出父级边界时，父级裁剪"它.

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>

在JSFiddle上查看

推荐答案

尝试使用此样式:

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

这篇关于在父div边界之外时如何不显示子div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！