Tengo un contenedor flexible (el cuadrado azul) con las siguientes propiedades:

display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

Por lo tanto, sus elementos secundarios (los cuadrados azules claros) se organizan como se ve a continuación. Sin embargo, me gustaría agregar otro hijo (el cuadrado verde) fuera del flujo normal y colocarlo en relación con su padre. Para posicionarlo como se ve a continuación, idealmente escribiría algo comobottom: 20px; ymargin: auto;.

Traté de jugar conz-index en vano. ¿Cómo debería abordar esto? ¿Debo recurrir a crear otro elemento padre?