Question

我有父元素width:100px和position:relative。我的内部元素为position:absolute。我需要这个内部元素伸展到200px，但它不起作用。它所需的最大值是父母的100％。

UPD 我不希望修复宽度。如果有内容，我只需要200px，如果内容不多，我需要auto。

P.S。我需要那些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/

也许您只搜索width（已修复）

 .inner { width: 200px; }

看到它正常工作：http://jsfiddle.net/jy6g2q7b/4/

Answer 2

将“width: 200%”添加到.inner，max-width仍可使用。

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

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

Answer 3

如果您使用的是AngularJS，则可以使用ng-style = {'width':'200%'}。如果没有，您可以将其更改为从父“

继承

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

}

干杯。

Answer 4

所有问题（奇怪的行为）都是由于这条线而发生的 -

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

您需要为这些文本块找到一些其他替代方案。您可以使用display: table-cell代替float，但这会阻止#content

如果我找到其他选择，我会更新我的答案。

Answer 5

为父级提供position:static，然后尝试

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

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

Answer 6

这是预期的行为。未达到max-width的{{1}}值，因为它受.inner的{{1}}限制且width ed .parent只会在同一行，直到它们到达包含元素的右边缘。

解决此问题的一种方法是使用伪元素来实现类似的边界结果而不受限制性float：

从.item移除width，这会导致它占width .parent，因为它是100%级元素。删除width，因为它将不再具有所需的结果
创建一个新的伪元素block。设置border: 1px solid yellow;和.parent:before以显示黄色边框
将border: 1px solid yellow;设为width: 100px;并.parent:before将其定位为相对position: absolute;并让其填充正确的区域

既然height: 100%;不受.parent .inner的限制，它应该遵守width规则。

＆＃13;

.parent

＆＃13;

max-width: 200px;

＆＃13;

css max-width不起作用

6 个答案: