javascript - 响应方格内的响应方格

我正在尝试制作一个响应正方形网格，网格中的每个正方形都包含另一个响应正方形网格。想想一个数独板，它有9个正方形，每个正方形包含9个正方形。

我从这个开始：
Grid of responsive squares
并使用在此处列出的flexbox答案：
https://jsfiddle.net/patrickberkeley/noLm1r45/3/

我本来以为只要在第一个方格内放一个自适应方格就可以了。但是内容div变为0px，您什么也看不到。我已经尝试过clearfix，但是得到了相同的结果。经过数小时的盘旋，我一无所获。我想念什么？有没有更好的JS解决方案？

的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小提琴：
https://jsfiddle.net/emilmr/upozc9a3/

最佳答案

我相信您的灌输是不对的。

您需要一个带有9个flex儿童的flex容器，其中还有9个盒子。浮动框也可以，因为您处理方形框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>