What is the condition for expanding a div element?

Question

I have one div element where I have all the articles. The articles themselves are div elements.

<div id='articleContainer'>
    <div class='article'></div>
    <div class='article'></div>
    <div class='article'></div>
</div>

Here is the css for aritcleContainer

#articleContainer{
    position: relative;
    float:left;
    width: 600px;
    min-height: 600px;
    padding: 50px;
}

What is the minimum condition for expanding it when I add new articles? This example works, but I just want to know what condition it can expand for itself. There are other examples that do not expand for themselves. Where I don’t know at all.

Answer 1

If the elements of the article are not floating elements, then the content will be resized to contain them.

If the elements of the articles are floating elements, they will not affect the size of the container. You can add a parameter overflowto the container so that it contains floating children:

#articleContainer{
    position: relative;
    float:left;
    width: 600px;
    min-height: 600px;
    padding: 50px;
    overflow: hidden;
}

, ( 600 ), , .