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

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

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

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

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

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

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

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

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

Однако это требует его пересчета при каждом добавлении нового дочернего элемента.

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

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

Спасибо.