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.

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

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>