Развернуть контейнер div с шириной содержимого

В моем приложении есть следующая структура:

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

Каждый дочерний div имеет известную фиксированную ширину, но приложение позволяет вставлять их больше в div_ child_container.

Я пытаюсь сделать, чтобы контейнер div div расширялся горизонтально, когда это необходимо, учитывая общую ширину дочернего контейнера.

Вот что происходит в настоящее время:

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

Если я устанавливаю ширину div_id_intainer на фиксированное значение, я могу заставить его расширяться горизонтально мимо контейнера div, который работает, несмотря на то, что он немного уродлив:

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

Тем не менее, это требует перерасчета его всякий раз, когда добавляется новый ребенок.

Есть ли способ сделать это без использования фиксированной ширины для дочернего контейнера, таким образом, чтобы конечный результат был

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

Спасибо.

Ответы

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

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

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

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

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