我有两个元素-一个是position: relative的父元素，另一个是position: absolute和max-width的子元素.问题是，子元素会缩小，而不是出界.
下面是一个简单的例子和JSFiddle分:
#outer {
position: relative;
width: 400px;
height: 400px;
border: 4px solid red;
margin: 0 auto;
}
#inner {
position: absolute;
left: 300px;
top: 0;
max-width: 240px;
border: 4px solid blue;
}
我希望子元素自然地伸展到240px，而不是缩小.Setting a fixed width is not an option，因为可能有一个子元素只有很少的内容-https://jsfiddle.net/9re34o0j/1/.
使用width: max-content，我们可以使它从该位置溢出.我希望这是你想要的:
#outer {
position: relative;
width: 400px;
height: 400px;
border: 4px solid red;
margin: 0 auto;
}
#outer>div {
position: absolute;
left: 300px;
top: 0;
max-width: 240px;
border: 4px solid blue;
width: max-content;
}
#outer>.inner2 {
top: 2rem;
}<div id="outer">
<div class="inner1">
Lorem
</div>
<div class="inner2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>