css - resto - Expandir contenedor div con ancho de contenido

div que ocupe todo el alto de la pantalla

Question

Tengo la siguiente estructura en mi aplicación:

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

Cada div hijo tiene un ancho fijo conocido, pero la aplicación permite que se inserten más en el divisor 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 sucede actualmente:

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

Si configuro el ancho div de child_container a un valor fijo, puedo hacer que se expanda horizontalmente más allá del contenedor div, que funciona a pesar de ser un poco feo:

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

Sin embargo, eso requiere recalcularlo cada vez que se agrega un nuevo niño.

¿Hay alguna manera de hacerlo sin utilizar anchos fijos para contenedor secundario, de forma tal que el resultado final sea

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

Gracias.

Answer 1

Aún más fácil:

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

Answer 2

Algo como esto debería funcionar:

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

Answer 3

El contenedor primario no crecerá cuando se agrega un elemento secundario.

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

pero podemos evitar la representación de uno nuevo en la siguiente línea usando css3 flex box. La muestra se coloca en el path mencionado a continuación

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

Answer 4

La solución moderna de hoy sería

#child_container {
    display: flex;
}

Porque flex-wrap está configurado por defecto para

flex-wrap: nowrap;

Esta solución simple funciona como un encanto. Y ahora también en todos los navegadores relevantes.

Answer 5

Si flotas todo lo que queda, incluidos los divs que lo contienen, funcionará.

Answer 6

simplemente establece el ancho del elemento principal en 120% y listo =)