css max-width is not working - html

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.
p.s. 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 floated .items 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>