Развернуть контейнер 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 |
+-----------------------------+

Спасибо.

Ответ 1

Что-то вроде этого должно работать:

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

Ответ 2

Еще проще:

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

Ответ 3

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

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

но мы можем избежать рендеринга нового в следующей строке с помощью фрейма css3. Образец помещен ниже путь

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

Ответ 4

Если вы оставите все оставшееся, включая содержащие div, оно будет работать.

Ответ 5

просто установите ширину родительского элемента на 120% и выполните =)