html - css 最大宽度不起作用

Question

我有父元素 width:100px 和 position:relative。我的内部元素是 position:absolute。我需要这个内部元素拉伸(stretch)到 200 像素，但它不起作用。它取的最大值是父级的 100%。

UPD我不想固定宽度。如果有内容，我只需要它最大为 200px，如果内容不多，则为 auto。

附注我需要那些 position 属性

这是 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>

样式:

.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;   
}

和jsfiddle举个例子

请大家帮忙

Answer 1

它工作正常。允许的最大宽度为 200 像素。在这里查看:

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

也许您只搜索宽度(固定)

 .inner { width: 200px; }

查看它的工作情况:http://jsfiddle.net/jy6g2q7b/4/