How to have each item in my flex row remain square (same width as height) without using JavaScript [duplicate]

Question

I'd like these letters to sit in the row, each letter div with same height and width. This is my demo of the problem https://codepen.io/danielyaa5/pen/BZRVyo

.container {
  display: flex;
  flex-direction: row;
  background: cyan;
  width: 50%;
}
.letter {
  border: 1px solid black;
  text-align: center;
}

<div class="container">
  <div class="letter">A</div>
  <div class="letter">B</div>
  <div class="letter">C</div>
  <div class="letter">D</div>
  <div class="letter">E</div>
  <div class="letter">F</div>
</div>

This is what I'd like to see: https://codepen.io/danielyaa5/pen/XgRYbE

Notice that divs have same height and width. Here though I manually set height and width to 50px, in my real life scenario I will not know the width because its dynamically set to a screen size percent. I was able to create a JavaScript solution but it increased the load time heavily in my actual app.

Answer 1

.container {
  display: flex;
  flex-direction: row;
  background: cyan;
  width: 50%;
}
.letter_wrap{
  display: inline-block;
  position: relative;
  width: 20%;
}
.letter_wrap:after{
    content: '';
    display: block;
    margin-top: 100%;
}
.letter {
  border: 1px solid black;
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

<div class="container">
  <div class="letter_wrap">
    <div class="letter">A</div>
  </div>
  <div class="letter_wrap">
    <div class="letter">B</div>
  </div>
  <div class="letter_wrap">
    <div class="letter">C</div>
  </div>
  <div class="letter_wrap">
    <div class="letter">D</div>
  </div>
  <div class="letter_wrap">
    <div class="letter">E</div>
  </div>
</div>