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

<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 развернутым горизонтально при необходимости, учитывая общую ширину дочернего контейнера.

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

+------ 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 |
+-----------------------------+

Благодарю.