div overflow problem

I have an outer div

position: relative;
overflow: hidden;
min-heigth: 450px;

containing a div

position: absolute;
top: 10px;
right: 10px;

The inner div is bigger than the min-heigth of the outer div and I see that the outer div is not scaling to the content of the inner div. Capping off the bottom content of the inner div.

How can I define the outer (or inner) div to scale vertically to the content (of the inn开发者_运维百科er div)

Thanks

@trascher; It's possible but you have add extra markup because when you give a child div an absolute position then it's parent div is not consider it's height.

Check this http://jsfiddle.net/sandeep/6UksD/1/

CSS:

#outer
{
    position: relative;
    min-height: 450px;
    background:red;
    margin:10px 0 0 10px;
    width:200px;
    overflow: hidden;
}
#inner
{
    position:relative;
    background:black;
    height:600px;
    width:100px;
    margin:10px 0 0 10px;
    float:left;
}
#abinner
{
    position:absolute;
    background:yellow;
    height:100%;
    width:100%;
}

HTML:

<div id="outer">
    <div id="inner">
        <div id="abinner"></div>
    </div>

</div>

First remove the min-heighton your outer div, and then instead of absolutely positioning the inner one, put a 10px padding on the outer one.

#outerDiv {
  position:relative;
  overflow:hidden;
  padding:10px;
}

#innerDiv {
  /*Stuff*/
}

Do provide us with an example though, it's hard to see the context...

Here's the stuff

<div id="outer">
    <div id="inner"></div>
</div>

#outer
{
    width:300px;
     height:auto;

}
#inner
{
    width:200px;
    height:300px;

}

I think this is thing you want:http://jsfiddle.net/anish/ZjQTt/

set inner content height according to your wish.the outer div expanded automatically.

Absolute positioning doesn't increase the height of it's parent element.

1. You either set the height of the outer div manually
2. You make the inner div to have margin top/left of 10px
3. You increase the height of the outer div using javascript.