使Div成长适合内容

Question

我有一个div (容器)，它包含另一个div (内容)。在内容div中，我有更多的div(项目)。内容div需要增长以适应项div。这件事很管用。不起作用的是容器div需要增长以适应内容div，但它不适合。

我不能事先指定任何宽度或高度，因为我不知道它们需要是什么。

我现在拥有的是：

​

 #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>

​

当我运行它时，容器div似乎没有得到它的宽度或高度设置。

如有任何建议，将不胜感激。

谢谢

Answer 1

您目前已将您的#content定位为绝对。由于这个原因，您的#container没有将它封装在里面。由于position: absolute属性，内容与容器无关。

因此，如果您只是从#content中删除行position: absolute。它应该能正常工作。

Answer 2

您是否尝试过将容器类的显示属性更改为“块”？或者其他的“内联块”