flex-grow

Si tienes dos cuadros, cada uno de 200 px de ancho, y te sobra un espacio vacío de 600 px, y deseas establecer flex-grow: 1 en el primer cuadro y flex-grow: 2 en el segundo cuadro, puedes calcular el tamaño resultante de la siguiente manera:

Calcula la suma de los valores de flex-grow para obtener el total de la proporción asignada al espacio vacío. En este caso, tienes flex-grow: 1 para el primer cuadro y flex-grow: 2 para el segundo cuadro, lo que da un total de 3.

Divide el espacio vacío (600 px) por el total de la proporción. En este caso, 600 px divididos por 3 resulta en 200 px.

Multiplica el valor calculado en el paso anterior por cada valor de flex-grow para determinar el tamaño resultante de cada cuadro.

Para el primer cuadro con flex-grow: 1, multiplica 200 px (espacio asignado) por 1 (valor de flex-grow), lo que resulta en 200 px para el primer cuadro. Para el segundo cuadro con flex-grow: 2, multiplica 200 px (espacio asignado) por 2 (valor de flex-grow), lo que resulta en 400 px para el segundo cuadro. Entonces, el tamaño resultante sería:

Cuadro 1: 200 px Cuadro 2: 400 px

Al asignar flex-grow: 1 al primer cuadro y flex-grow: 2 al segundo cuadro, el segundo cuadro ocupará el doble del espacio asignado en comparación con el primer cuadro.

aqui te dejo un ejemplo que a mi me sirvio:

---HTLM--

---CSS--- .container { display: flex; justify-content: space-between; }

.box { height: 200px; background-color: #ccc; }

.box1 { flex-grow: 1; }

.box2 { flex-grow: 2; }