css max-width is not working

Question

I have parent element width:100px and position:relative . And I have its inner element with position:absolute . I need this inner element to stretch out up to 200px, but it doesn't work. Maximum value it takes is 100% of parent.

UPD I don't want width to be fixed. I just needed it to be up to 200px if there is content and auto if not much content there.

ps I need those position properties

Here's html:

<div class='parent'>
    <div>element</div>
    <div class="inner">
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
    </div>
</div>

styling:

.parent {
    width: 100px;
    border: 1px solid yellow;
    position: relative;
}

.inner {
    max-width: 200px;
    border: 1px solid red;
    position: absolute;
}

.item {
    float: left;
    border: 1px dotted grey;   
}

And jsfiddle to the example

Anyone please help

Answer 1

It is working fine. Your maximum width allowed is 200 pixels. See it here:

http://jsfiddle.net/jy6g2q7b/1/

Maybe you are searching only for width (is fixed)

 .inner { width: 200px; }

See it working: http://jsfiddle.net/jy6g2q7b/4/

Answer 2

add " width: 200% " to the .inner and the max-width will still work.

.inner {
    width: 200%;
    max-width: 200px;
    border: 1px solid red;
    position: absolute;
}

http://jsfiddle.net/jy6g2q7b/2/

Answer 3

if you are using AngularJS, you can use ng-style = {'width':'200%'} . And if not, you can change it to inherit from parent `

.inner {
    max-width: inherit;
    border: 1px solid red;
    position: absolute;

}

Cheers.

Answer 4

All that problem (odd behavior) is occurring due to this line -

.item {
    float: left; /* THIS ONE */
    border: 1px dotted grey;
}

you need to find some other alternative for those text blocks to align. You can use display: table-cell instead of float , but that makes the blocks go out of #content

I'll update my answer if I find any alternative.

Answer 5

Give position:static for the parent and then try

.parent {
    border: 1px solid yellow;
    position: static;
    width: 100px;
}

.inner {
    border: 1px solid red;
    max-width: 200px;
    position: absolute;
}

Answer 6

This is expected behaviour. The max-width value of .inner is not reached because it is limited by the width of .parent and the float ed .item s will only be on the same row until they hit the right edge of the containing element.

One way around this issue is to use a pseudo element to achieve a similar bordered result without the restrictive width :

• Remove width from .parent , this will cause it to take up 100% of the width as it is a block level element. Remove border: 1px solid yellow; as it will no longer have the desired result
• Create a new pseudo element .parent:before . Set border: 1px solid yellow; and width: 100px; to show the yellow border on this instead
• Set .parent:before to be position: absolute; and have height: 100%; to position it relatively .parent and get it to fill the correct area

Now that .inner is not restricted by the width of .parent it should abide by the max-width: 200px; rule.

 .parent { position: relative; } .parent:before { border: 1px solid yellow; content: ""; display: block; height: 100%; position: absolute; width: 100px; } .inner { border: 1px solid red; max-width: 200px; position: absolute; } .item { border: 1px dotted grey; float: left; } 

 <div class='parent'> <div>element</div> <div class="inner"> <div class="item">text</div> <div class="item">text</div> <div class="item">text</div> <div class="item">text</div> <div class="item">text</div> <div class="item">text</div> <div class="item">text</div> <div class="item">text</div> <div class="item">text</div> </div> </div>