Absolute positioning and overflow-x

The markup is the following:

<div class="mask">
    <div id="content-1" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div id="content-2" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div> 
</div>

and this is the CSS

.mask{
    position:absolute;
    width:300px;
    height:300px;
    overflow-x:hidden;
}
.content-item{
    position:absolute;
    width:300px;
}
#content-1{
    left:10px;
}
#content-2{
    left:305px;
}

Fiddle here: http://jsfiddle.net/steweb/9zMhY/ (without a开发者_如何学运维 fixed height)

I need a mask just because I want to make a transition from content-1 to content-2. There are no problems about the transition itself (content-1 morphs to -300px left and content-2 morphs to 0px left).

Above you can see that height is set to 300px, and overflow-x:hidden work as expected!

BUT I don't want to set an height to the mask! Well, if I remove height I can't see anything, just removing overflow-x:hidden everything appears.

The question is: without changing the positioning method (I need absolute positioning, with float would be much easier), how could I obtain a simple overflow-x without setting a fixed height? Why is overflow-x:hidden hiding everything instead of hiding just everything on the left/right?

---

The box model of absolutely positioned elements doesn't influence their parent containers.

Thats very logical because they are just not inside but absolute. Everthing else would be weird.

However floating elements behave the same way, which is often inconvinient.

A common practice to fix this is a "clearfix" .

You can put something like at the bottom of your parent container.

Another way is to set the height manually. I am not exactly sure what you want to do but do you really need the children to be absolute?

---

The mask loses its height because you position absolute its children.

If you take this out it will work:

.content-item{
   position:absolute;
   width:300px;
}

Div's are block elements which means they inherit the with from their parents so there is no need you set the with to 300. The aprent is already absolute why are you using absolute for the child div?.

jsfiddle link: http://jsfiddle.net/9zMhY/3/