Agregue un div de superposición dentro de contenedores flexibles nesteds (cuadrícula de 3×3) en una celda específica

Tengo una grilla de 3×3 con concepto de flex-box, dentro de cada celda tiene otra grilla de 3×3.

Estaba tratando de poner una Superposición sobre la grilla interna en una celda, pero no encontré cómo hacerlo.

Encontré algunos ejemplos como este Overlay / hover a div en div contenedor de flexbox, pero no funciona en flex-box nested, o no sé cómo configurarlos.

aquí está el html, la grilla tiene solo dos celdas para ocupar menos espacio, de hecho se hace con JQuery, pero para el ejemplo, solo use 2.

.Region{ position: absolute; top: 10px; left: 10px; width: 500px; height: 500px; border: 5px double black; display: flex; } .FlexContainer{ display: flex; flex-direction: column; flex-grow: 1; } .FlexContainer > div{ flex-grow: 1; flex-basis: 0; border: 3px solid blue; display: flex; flex-direction: row; margin: 5px; } .FlexContainer > div > div{ flex-grow: 1; flex-basis: 0; border: 1px solid red; margin: 3px; display:flex; flex-direction: row; } .Overlay{ position: absolute; width: 100%; height: 100%; background-color: rgba(013, 130, 230, 0.5); cursor: not-allowed; } 
  

He intentado con Overlay dentro y fuera del FlexContainer interno, pero no funcionó.

Finalmente lo puso a funcionar, de hecho, el contenedor principal debe tener una posición relativa para que funcione, por lo que hay dos cambios, uno en el FlexContainer y otro en el Overlay.

 .FlexContainer{ position:relative; <-- ADD THIS display: flex; flex-direction: column; flex-grow: 1; } .FlexContainer .Overlay { position: absolute; top: 0px; left: 0px; margin: 0px; border: 0px; width: 100%; height: 100%; background-color: rgba(013, 130, 230, 0.5); cursor: not-allowed; } 

Solución Code Pen https://codepen.io/anon/pen/dKaXqg

Créditos para el usuario Pogany del hilo CSS-TRICKS del sitio web css-tricks: https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/#post -273437