CODEWITHSUNDEEP
htmlcss
Kragalon
Kragalon

Reputation: 450

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:

enter image description here

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

Upvotes: 1

Views: 3305

Answers (3)

Robin B
Robin B

Reputation: 301

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>

Upvotes: 5

Mehrshad Farahani
Mehrshad Farahani

Reputation: 127

just add overflow:hidden; to your style.

Upvotes: 2

S. Nadezhnyy
S. Nadezhnyy

Reputation: 582

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

Upvotes: 5

Related Questions