[css] CSS container div not getting height

I want my container div to get the height of max of its children's height. without knowing what height the child divs are going to have. I was trying out on JSFiddle. The container div is on red. which is not showing up. Why?

Try inserting this clearing div before the last </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

I ran into this same issue, and I have come up with four total viable solutions:

1. Make the container display: flex; (this is my favorite solution)
2. Add overflow: auto; or overflow: hidden; to the container
3. Add the following CSS for the container:

.c:after {
    clear: both;
    content: "";
    display: block;
}

4. Make the following the last item inside the container:

<div style="clear: both;"></div>

It is not that easier?

.c {
    overflow: auto;
}

You are floating the children which means they "float" in front of the container. In order to take the correct height, you must "clear" the float

The div style="clear: both" clears the floating an gives the correct height to the container. see http://css.maxdesign.com.au/floatutorial/clear.htm for more info on floats.

eg.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

The best and the most bulletproof solution is to add ::before and ::after pseudoelements to the container. So if you have for example a list like:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

And every elements in the list has float:left property, then you should add to your css:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Or you could try display:inline-block; property, then you don't need to add any clearfix.