Mover un elemento flexible al salir del contenedor flexible - html, css, css3, flexbox

Tengo esta situación en la que tengo que hacer una deel elemento flexible en un contenedor flexible ocupa todo el espacio disponible del elemento primario (el contenedor flexible). Por lo tanto, moví otros elementos flexibles de DOM al establecer la posición en "absoluta".

<div style="display:flex; flex-direction:column">
<div style="flex:1 1 auto">Flex Item which should take it all...</div>
<div style="position:absolute">Not really a Flex Item 1</div>
<div style="position:absolute">Not really a Flex Item 1</div>
<div style="position:absolute">Not really a Flex Item 2</div>
</div>

Una versión un poco menos hacky de arriba:

<div style="display:flex; flex-direction:column">
<div style="flex:1 1 auto">Flex Item which should take it all...</div>
<div style="position:absolute">
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 2</div>
</div>
</div>

Restricciones:

• No puedo usar display:none para esos elementos flexibles no deseados. En realidad, son ventanas emergentes que, por defecto, no son visibles, pero que luego se vuelven visibles en algunas acciones de usuario.
• No puedo mover esos elementos flexibles fuera del contenedor flexible por otras razones.

¿Existe una solución más limpia y elegante (es posible una solución basada en flexbox?) Que el uso de position: absolute teniendo en cuenta las restricciones mencionadas?

Respuestas

Si puedes usar height: 0 o width: 0, puedes ocultar las ventanas emergentes sin position: absolute, display: none o quitándolos del contenedor.

También podrías hacerlo al revés: deja que todos los demás elementos sigan siendo elementos flexibles y crea ese elemento position: absolute con height: 100%, width: 100%

(Tienes que agregar position: relative al elemento contenedor para que esto funcione)

.x {
background: red;
position: relative;
}
.y {
background: green;
position: absolute;
width: 100%;
height: 100%;
}

<div style="display:flex; flex-direction:column" class="x">
<div style="flex:1 1 auto" class="y">Flex Item which should take it all...</div>
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 2</div>
</div>