Responsive grid of squares within a responsive grid of squares

Question

I am trying to make a grid of responsive squares, with each square in the grid containing another grid of responsive squares. Think of a sudoku board, which has 9 squares, each

Answer 1

I believe your imbrication is not right.

You need a flex container with 9 flex child holding also 9 boxes. floating boxes will do also since your dealing with square boxes DEMO

* {
  box-sizing: border-box;
}
body,
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex,
.flex>div {
  border: solid 1px;
  width: 33.33%;
  text-align: center;
}
.flex > div:before {
  display: inline-block;
  padding-top: 100%;
  content: '';
  vertical-align: middle;
}
body {
  width:50%;
  min-width: 450px;
  margin:auto;
  font-size: calc(0.5vw + 10px); /* to hold here 3 letters, you can increase vw value for a single number */
}
/* resize here or let window do it */
div:nth-child(odd){
background:rgba(0,0,0,0.25)  
}

  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  


  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo
  
  

    sudo