绝对定位的div的宽度

Question

I have following HTML :

<div class="outter">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quis animi nulla accusantium minus, similique quos ullam consectetur neque voluptatibus odio, ipsam cumque consequuntur dolorem harum nostrum sequi dolores! Ut.</div>
</div>

And this CSS :

.outter {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 200px;
    margin-left: 100px;    
    position: relative;
}
.inner {
    position: absolute;
    top: -60px;
    left: -100px;
    background: green;
    display: inline-block;
    max-width: 400px;
}

And here is the Demo .

The inner div should take its text content width upto 400px maximum (should be fluid). With this code it takes its parent's width.

How do achieve this?

UPDATE

This inner div text can be changed dynamically

Answer 1

When using max-width put explicit width first

 .outter { display: inline-block; width: 100px; height: 100px; background: red; margin-top: 200px; margin-left: 100px; position: relative; min-width: 100px; } .inner { position: absolute; top: -60px; left: -100px; background: rgba(0, 255, 0, .5); display: inline-block; width: 400px; max-width: 400px; } 

 <div class="outter"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quis animi nulla accusantium minus, similique quos ullam consectetur neque voluptatibus odio, ipsam cumque consequuntur dolorem harum nostrum sequi dolores! Ut.</div> </div> 

Answer 2

Actually, an element with absolute positioning doesn't take any width by default, only the size of its content .

So, if a block element should have a 100% width as default, you have to set it for an element with position absolute .

I'm not sure what you are trying to achieve there, but you should simply set the width property you "lost" with position absolute :

.inner {
    position: absolute; // here, width becomes "auto"
    top: -60px;
    left: -100px;
    background: rgba(0, 255, 0, .5);
    display: inline-block;
    width: 100%; // 100% = closest relative parent width, set it to whatever you want
    max-width: 400px;
}