Expand container div with content width

Something like this should work:

#container, #child_container, .child { 
    position: relative; 
    float: left;
}

Even easier:

<style>
    #container{ display: inline-block; }
</style>

The parent container won't grow when a child element is added.

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

but we can avoid the rendering of new one on the next line by using css3 flex box. The sample is placed the below mentioned path

  .products{
            display: -webkit-flex;
            -webkit-flex-flow: row;
            /*-webkit-justify-content: center;*/
        }
        .products > div{
            padding: 0 4em;
        }

The result will look like this:

+--- child_container ----+|
| child1 child2 child3  ch|ild4 child5  
|                         |
+------------------------+

If you float everything left including the containing divs, it will work.

The modern solution today would be

#child_container {
    display: flex;
}

Because flex-wrap is by default set to

flex-wrap: nowrap;

This simple solution works like a charm. And by now also in all relevant browsers.