html - 如何在不使用 javascript 的情况下让我的 flex 行中的每个项目保持方形（宽度与高度相同）

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

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>