Add an overlay div inside nested flex containers (3x3 grid) in a specific cell

Question

I have a 3x3 grid with flex-box concept, inside of each cell it has another 3x3 grid.

I was trying to put an Overlay over the Inner grid in one cell, but I didn't find how to do it.

I found some examples like this one Overlay / hover a div in flexbox container div but it don't work in nested flex-box, or I don't know how to set them up.

here is the html, the grid has just two cell to take up less space, it actually is done with JQuery but for the example lets use only 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;
     }

 <div class="Region">
     <div class="FlexContainer">
      <div>
       <div>
        <div class="FlexContainer">
         <div>
          <div></div>
          <div></div>
          <div></div>
         </div>
         <div>
          <div></div>
          <div></div>
          <div></div>
         </div>
         <div>
          <div></div>
          <div></div>
          <div></div>
         </div>
        </div>
       </div>
       <div></div>
       <div></div>
      </div>
      <div>
       <div></div>
       <div></div>
       <div></div>
      </div>
      <div>
       <div>
        <div class="FlexContainer">
        <div class="Overlay"></div>
         <div>
          <div>
          </div>
          <div></div>
          <div></div>
         </div>
         <div>
          <div></div>
          <div></div>
          <div></div>
         </div>
         <div>
          <div></div>
          <div></div>
          <div></div>
         </div>
        </div>
       </div>
       <div></div>
       <div></div>
      </div>
     </div>
    </div>

I have tried with the Overlay inside and outside the Inner FlexContainer, but didn't work.

score 1 · Accepted Answer · answered Jun 30 '18 at 22:31

Finally got it to work, indeed the parent container must have relative position for it to work, so there is two change, one in the FlexContainer and other in the 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;
}

Code Pen solution https://codepen.io/anon/pen/dKaXqg

Credits to user Pogany from the css-tricks web site CSS-TRICKS thread: https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/#post-273437

Add an overlay div inside nested flex containers (3x3 grid) in a specific cell

1 Answers1

Linked