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

Question

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

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

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

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

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

Спасибо.

Answer 1

Еще проще:

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

Answer 2

Примерно так должно работать:

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

Современное решение сегодня было бы

#child_container {
    display: flex;
}

, поскольку flex-wrap по умолчанию установлено на

flex-wrap: nowrap;

Это простое решение работает как шарм.И теперь также во всех соответствующих браузерах.

Answer 6

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