CODEWITHSUNDEEP
htmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Overflow hidden with parent div in absolute position

I have a very specific requirement that is, the parent div is with absolute:position and child div with absolute position and in the parent div I have overflow:hidden so the extra width of the child div get hidden but this is not working, I know the parent div would have to be with position:relative, but as per the current structure of my code I cannot change the parent div position from absolute to relative, just wanted to know if there is a way to handle this?

Here is the JSfiddle of example, I want the light red box to be hidden under the parent div so the child div would be within parent.

Here is my code 

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
}
.wrapper-inner {
  position: absolute;
  width: 450px;
  height: 380px;
  background: #fecccc;
}
<div class="wrapper">
  <div class="wrapper-inner">
    Content goes here
  </div>
</div>

Upvotes: 0

Views: 1129

Answers (6)

Bharat Negi
Bharat Negi

Reputation: 507

Check this code, as per your requirement:

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
  overflow: hidden;
}

Upvotes: 0

Novice
Novice

Reputation: 558

You missed out the overflow:hidden in parent wrapper: 

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
  overflow: hidden
}

.wrapper-inner {
  position: absolute;
  width: 450px;
  height: 380px;
  background: #fecccc;
}

In short, you had answered your own question! :)

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

DEMO

css

.wrapper-inner {
  position: absolute; /* positioned wrt it parent */
  top:10px; /* account for 10px padding in parent */
  bottom:10px;
  left:10px;
  right:10px;
  /* width: 450px;
  height: 380px; */
  background: #fecccc;
}

Upvotes: 0

MJH
MJH

Reputation: 2307

Unless I am misunderstanding your requirement, you don't want to see the child div extending outside the parent div. You mentioned overflow:hidden, but that does not actually exist in your fiddle. Adding it to the .wrapper class does seem to accomplish what I think is your requirement.

Upvotes: 0

Osmani
Osmani

Reputation: 300

Please check out my fiddle

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; overflow:hidden; background:#666666; padding:10px;}
.wrapper-inner{position:relative; width:100%; height:100%; background:#fecccc; overflow-y:scroll;}
<div class="wrapper">
	<div class="wrapper-inner">
    	Content goes here Content goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here
    </div>
</div>

Upvotes: 0

z0mBi3
z0mBi3

Reputation: 1544

You seem to have missed out to add overflow:hidden in wrapper class.

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; background:#666666; padding:10px; overflow:hidden;}
.wrapper-inner{position:absolute; width:450px; height:380px; background:#fecccc;}
<div class="wrapper">
	<div class="wrapper-inner">
    	Content goes here
    </div>
</div>

Upvotes: 1

Related Questions