Absolute position and Overflow:hidden

Answer 1

The Problem has a Name: "offsetParent". As soon as an element gets the position abolute|relative or has its position/size altered by a transformation, it becomes the offsetParent of its children. The original offsetParent for all elements (and therefore the area in which overflowing content will be shown or relative to which absolute positions are given) is the viewport of the browser or the iFrame. But after an absolute or relative position had been applied to an element, ist bounding box is the new origin for positioning and clipping of all of ist children.

In a Project, I had a 'popup' window containing a pulldown menu. The pulldown could easily extend over the limits of the window. But as soon as the window was moved (by using a transformation or relative positioning), the pulldown appeared at a wrong place (having the top-left Position of the window as additional Offset) and was clipped at the window's borders. The quick hack I used was to append the pulldown as child of Body (instead fo the window) and position it absolute, using the coordinates of the button that opens the menu (from the clientBoundingBox of the button) and the offset from the button's offsetParent) as absolute position of the pulldown. Then the Body again was the limiting area. This is, however, a bit tricky if it comes to multiple Levels of z-axis ordering (as the pulldown's z-axis is relative to Body, which might be different from the one the window has). But since the window has to be visible (therefore on top) to open the menu, this was negligible. Of course, this solution requires the use of JavaScript and cannot be done by simple CSS.

You can't eat the cake and keep it. If you take something out of the layout context, it becomes ist own, indepenent (and limited) layout 'frame'

Answer 2

The code below works like a charm.

<div id="grandparent" style="position:relative;">
    <div id="parent" style="overflow:hidden;">
        <div id="child" style="position:absolute;">
        </div>
    </div>
</div>

Answer 3

Use css...

* {margin: 0; padding: 0;}

#parent {width: auto; overflow: hidden;}

#child {position: absolute; width: auto;}

With width auto it will always append to the smallest possible size; and with the reset it will help maintain natural flow.

But if the child is bigger in any way than the parent, then it will not be possible. But with this CSS I think you will achieve what you want to the maximum of what is possible.

Answer 4

thirtydot's solution is actually a good idea.

Here's a clearer example: http://jsfiddle.net/y9dtL68d/

HTML

<div id="grandparent">
    <div id="parent">
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
    </div>
    <div id="child">
        dudes
    </div>    
</div>

CSS

#grandparent {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 20px;
    background: #d0d0d0;
}
#parent {
    width: 150px;
    height: 150px;
    overflow:hidden;
}
#child {
    position: absolute;
    background: red;
    color: white;
    left: 100%;
    top: 0;
}

Answer 5

I usually use overflow:hidden as clearfix. In this case, I give up and just add an additional div.

<div id="parent" style="position:relative;">
  <!-- floating divs here -->
  <div id="child" style="position:absolute;"></div>
  <div style="clear:both"></div>
</div>

Answer 6

I did this in a very simple way

<div class="rootparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

.rootparent {
  position:relative;
  border:1px solid #ccc;
  width:150px;
  height:150px;
}
.parent {
  overflow:hidden;
}
.child {
   position: absolute;
   top: -10px;
   right: -15px;
   width: 30px;
   height: 30px;
   border: 1px solid red;
}

Here is jsfiddle link