set the elements height equal to the flex width with pure CSS

Question

I want to create n cells in a row. All of these cells have a flex width. I want these cells always having the same height as their current width.

My pseudo code

const cellsPerRow = 7; // just a number

$(document).ready(() => {
  for (var i = 0; i < cellsPerRow; i++) {
    const div1 = $("<div></div>");
    div1.addClass("box");
    div1.html(i);
    $("#container1").append(div1);

    const div2 = $("<div></div>");
    div2.addClass("box");
    div2.html(i);
    $("#container2").append(div2);
  }
});

.container {
  display: flex;
}

.box {
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1" class="container">

</div>

<div id="container2" class="container">

</div>

Of course I can set a height when creating these boxes but they have to stay dynamic because if the width of the boxes changes, I want the height changing too.