html - 绝对定位的 div 的宽度

Question

我有以下 HTML:

<div class="outter">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quis animi nulla accusantium minus, similique quos ullam consectetur neque voluptatibus odio, ipsam cumque consequuntur dolorem harum nostrum sequi dolores! Ut.</div>
</div>

还有这个 CSS:

.outter {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 200px;
    margin-left: 100px;    
    position: relative;
}
.inner {
    position: absolute;
    top: -60px;
    left: -100px;
    background: green;
    display: inline-block;
    max-width: 400px;
}

这里是 Demo .

内部 div 的文本内容宽度应最大为 400px(应该是流畅的)。使用此代码，它采用其父级的宽度。

如何实现这一点？

更新

这个内部 div 文本可以动态更改

Answer 1

当使用 max-width 时，将明确的宽度放在第一位

.outter {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 200px;
    margin-left: 100px;
    position: relative;
    min-width: 100px;
}
.inner {
    position: absolute;
    top: -60px;
    left: -100px;
    background: rgba(0, 255, 0, .5);
    display: inline-block;
    width: 400px;
    max-width: 400px;
}

<div class="outter">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quis animi nulla accusantium minus, similique quos ullam consectetur neque voluptatibus odio, ipsam cumque consequuntur dolorem harum nostrum sequi dolores! Ut.</div>
</div>