Problema con un una ventana fixed y su display

[sonickseven]

Hola chicos que tal como va todo. Muchachos como siempre acudo por que tengo un problema, y es que tengo una box que tiene dentro otras cajas, pero en algun momento unas cajas cambian de tamaño y las otras no, la cosa es que la caja madretambien cambia de tamaño, y eso es lo que estoy tratando de evitar. pero ya pase mas de 2 horas dandole y tambien buscando en internet pero no he encontrado solucion. A continuecion les ilustrare mi problema:

las ventans sin cambiar de tamaño, serian las verde oscuro. ahi un div que puse para ver si asi podia solucionarlo(fallido intento) que es de color verde clarito, y el contenedor padre que es de color rojo.


ahora cambio la ventana de tamaño sucede esto:
la ventana padre se ajusta al tamaño de la ventana cambiada de tamaño, que es lo que quiero evitar


ahora como me gustaria que quedara es asi:


sin que la ventana madre(padre) cambie de tamaño.

Diganmen que si es posible!!!!!

Gracias chicos.

[pzin]

Podrías flotar los elementos. Así su altura no afecta al contenedor a menos que quieras. Otra solución sería usar posiciones absolutas.

Es mejor publicar código que imágenes.

[sonickseven]

YA NO TIENEN EL DIV DE COLOR VERDE CLARITO QUE ESTA EN LA GRAFICA DE ARRIBA, SOLO LO PUSE POR SI SERVIA PERO NO, ASI QUE PARA EVITAR MAYOR CODIGO LO QUITE.

ok bueno, ya pude solucionarlo, no de la forma que queria, pero bueno, intente con tu opinion de los float pero no funciono debido a que e contenedor es de posicion fixed.

codigo anterior (tu lo pediste :D )

Código CSS:

#padre{
background: rgba(0,0,0,.4);
z-index: 1111;
position: fixed;
bottom: 0;
right: 0;
}
 
#padre>i {/*serian los cuadritos verdes oscuros*/
transition: transform .5s;
cursor: pointer;
height: 60px;
width: 60px;
display: inline-block;
border-radius: 50%;
border: 2px solid #fff;
}
 
#padre>div{/*serian el cuadro grande  verde oscuro*/
width: 267px;
height: 437px;
vertical-align: top;
transition: transform 1s, opacity .5s linear .3s;
resize: both;
overflow: hidden;
position: relative;
display: inline-block;
margin-right: 5px;
min-height: 150px;
padding: 4px 7px 4px;
min-width: 150px;
width: 200px;
border: 1px solid black;
border-radius: 7px;
height: 283px;
}
 

listos ahi esta el codigo.

ahora la forma en la que lo pude solucionar fue que cuando el #padre>div hiciera un fadeIn o una redimención con javascript le pondria un margin-top negativo(acerlo dinamico), aparte tambien le puse una altura fija a la ventana padre de 67px para que no se ajustara a sus ventanas hijas.

como lo deje:

Código CSS:

#padre {
height: 66px;
background: rgba(0,0,0,.4);
z-index: 1111;
position: fixed;
bottom: 0;
right: 0;
}
 

y el javascript

Código Javascript:

function se(tag){
      return document.querySelector(tag);
}
function marginChat(cod, fx){//cod seria el seleccionador ejemplo:  '#padre>div'
    if(fx!==undefined)
        se(cod).style.marginTop='0';
    else
        se(cod).style.marginTop='-'+(se(cod).offsetHeight-64)+'px';
}
 

y ya con eso la ventana padre nunca va acambiar de tamaño, lo único que cambia es el marginTop de la ventana hija "#padre>div"

SI tienes otra forma que sea solo con CSS te lo agradeceria