javascript - 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 containing 9 squares.

I started with this: Grid of responsive squares and used the flexbox answer, which was laid out here: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

I originally thought that it would work if I just put another responsive square grid inside of the first one. But the content div just becomes 0px and you don't see anything. I've tried clearfix, but got the same result. After hours of going in circles, I've gotten nowhere. What am I missing? Is there a JS solution that is better?

html:

 <div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
     <div class='interior-square-grid'>
       <div class='interior-square-grid__cell square-grid__cell--3'>
        <div class='interior-square-grid__content'>
        3
        </div>
       </div>
     </div>
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

css:

  .square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.interior-square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.interior-square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px green;
  overflow: hidden;
  position: relative;
}

.interior-square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.interior-square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

.interior-square-grid__cell--10 {
  flex-basis: 10%;
}

.interior-square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.interior-square-grid__cell--8 {
  flex-basis: 12.5%;
}

.interior-square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.interior-square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.interior-interior-square-grid__cell--5 {
  flex-basis: 20%;
}

.interior-square-grid__cell--4 {
  flex-basis: 25%;
}

.interior-square-grid__cell--3 {
  flex-basis: 33.333%;
}

.interior-square-grid__cell--2 {
  flex-basis: 50%;
}

.interior-square-grid__cell--1 {
  flex-basis: 100%;
}

JS fiddle: https://jsfiddle.net/emilmr/upozc9a3/

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)  
}

<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>