Expand div contenedor con la anchura del contenido

Question

que tienen la siguiente estructura en mi solicitud:

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

Cada div niño tiene una anchura fija conocida, pero la aplicación permite que más de ellos para ser insertado en el div child_container.

Lo que trato de hacer es hacer que el contenedor div se expanda horizontalmente cuando sea necesario, dado el ancho total del contenedor secundario.

Esto es lo que ocurre actualmente:

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

Si fijo el ancho child_container div a un valor fijo, puedo conseguir que se expanda horizontalmente por delante del div contenedor, que funciona a pesar de ser un poco feo:

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

Sin embargo, eso requiere recalcularlo cuando se agrega un nuevo elemento secundario.

¿Hay una manera de hacer esto sin necesidad de utilizar anchos fijos de contenedor secundario, de tal manera que el resultado final es

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

Gracias.

Answer 1

Algo como esto debería funcionar:

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

Answer 2

Si flota todo lo que queda incluido el contenido de divs, funcionará.

Answer 3

Aún más fácil:

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

Answer 4

acaba de establecer la anchura de la matriz al 120% y hecho =)

Answer 5

El contenedor primario ganaron' t crecer cuando se agrega un elemento secundario.

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

pero podemos evitar la prestación de uno nuevo en la siguiente línea mediante el uso de la caja de la flexión CSS3. La muestra se coloca por debajo de la mencionada path

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

El resultado se verá así:

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