Make Div Grow To Fit Content-CodePudding

I have a div (container) which contains another div (content). Inside the content div I have more divs (items). The content div needs to grow to fit the item divs. This much works. What doesn't work is that the container div needs to grow to fit the content div but it doesn't.

I can't specify any widths or heights in advance because I don't know what they need to be.

Here's what I have:

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

When I run this the container div doesn't appear to get it's width or height set.

Any suggestions would be appreciated.

Thanks

CodePudding user response：

You have currently positioned your #content as absolute. Due to this, your #container does not wrap it inside it. Your content lies independent of the container, due to the position: absolute property

So if you just remove the line position: absolute from your #content CSS. It should work just fine.

CodePudding user response：

Have you tried altering the display attribute of the container class to "block"? Or something else then "inline-block"

CodePudding user response：

Have you tried removing position : absolute ?