如何在矩形父级中制作方块？

Question

阻止.cell2包含阻止.round-area。

区块.round-area不是正方形。

但我需要让.round-area成为一个正方形。

我还需要块.cell2的高度等于块.round-area的高度

结果应如下所示：

html, 
body{
  height: 100%;
  padding: 0;
  margin: 0;
}

.cells{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;  
    height: 100%;
}

.cell{
  width: calc(33.3% - 10px);
  height: calc(33.3% - 10px);
  background: red;
  margin: 5px;
  overflow: hidden;
}

.cell:nth-child(1) {
  width: 30%;
}
.cell:nth-child(2) {
  width: 60%;
}

.round-area{
  background: orange;
  /*border-radius: 50%;*/
  height: 100%;
  width: 100%;
  float: right;
}

<div class="cells">
  <div class="cell">cell</div>
  <div class="cell cell2">
     <div class="round-area">
      content
    </div>
  </div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell"></div>
</div>

Primitive Data Types section