html - javascriptを使用せずにフレックス行の各アイテムを正方形(高さと同じ幅)のままにする方法

Question

これらの文字を一列に並べて、各文字 div の高さと幅を同じにしたいと思います。これは私の問題の mvp ですhttps://codepen.io/danielyaa5/pen/BZRVyo

これは私が見たいものです。https://codepen.io/danielyaa5/pen/XgRYbE div の高さと幅が同じであることに注意してください。ここでは、高さと幅を手動で 50px に設定していますが、実際のシナリオでは、画面サイズのパーセントに動的に設定されるため、幅はわかりません。JavaScript ソリューションを作成することはできましたが、実際のアプリでは読み込み時間が大幅に増加しました。

MVP

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

.container {
  display: flex;
  flex-direction: row;
  background: cyan;
  width: 50%;
}

.letter {
  border: 1px solid black;
  text-align: center;
}