如何让外层container div自适应内部绝对定位content元素的宽高？

#content设置了position: absolute属性，绝对定位元素会脱离正常文档流，父元素#container计算自身宽高时会完全忽略绝对定位子元素的尺寸，因此出现container无法自适应大小的问题。

优先推荐纯CSS方案，无需修改HTML结构，也不需要预先设置任何固定宽高：

• 移除#content的position: absolute属性，让#content回归正常文档流，父元素即可自动感知它的尺寸完成自适应
• 原有样式里的边距、布局逻辑都可以保留，无需额外调整

如果业务场景必须要求#content使用绝对定位，则可以用JS动态同步尺寸：

• 页面加载/内容变动时，获取#content的offsetWidth和offsetHeight，手动赋值给#container的style.width和style.height即可

#container {
    position: absolute;
    display: inline-block;
    font: 18px arial;
    border: 1px solid steelblue;
    background-color: lightgoldenrodyellow;
}

#content {
    /* 删掉了原有的position: absolute声明 */
    display: flex;
    flex-direction: column;
    margin: 5px;
    background-color: orange;
}

.item {
    position: relative;
    display: flex;
    flex-direction: row;
}
.s {
    white-space: nowrap;
}

<div id="container">
    <div id="content">
        <div class="item">
            <span class="s">span 1</span><span class="s">span 2</span>
        </div>
        <div class="item">
            <span class="s">span 1</span><span class="s">span 2</span>
        </div>
        <div class="item">
            <span class="s">span 1</span><span class="s">span 2</span>
        </div>
    </div>
</div>

修改后#container会完全跟随内部内容的尺寸自动撑开，不管后续item数量变化还是内容长度变化，都能正常适配。

内容的提问来源于stack exchange，提问作者Len White