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

我想把这些字母排成一行，每个字母都有相同的高度和宽度。这是我的mvp的问题

这就是我想看到的。 请注意，div具有相同的高度和宽度。在这里，虽然我手动将高度和宽度设置为50px，但在我的实际场景中，我不知道宽度，因为它会动态设置为屏幕大小百分比。我能够创建一个javascript解决方案，但它大大增加了我实际应用程序的加载时间

MVP

A.
B
C
D
E
F
.集装箱{
显示器：flex；
弯曲方向：行；
背景：青色；
宽度：50%；
}
.信{
边框：1px纯黑；
文本对齐：居中；
}

.container{
显示器：flex；
弯曲方向：行；
背景：青色；
宽度：50%；
}
.信封{
显示：内联块；
位置：相对位置；
宽度：20%；
}
.信的包装：之后{
内容：''；
显示：块；
利润率最高：100%；
}
.信{
边框：1px纯黑；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}

A.
B
C
D
E

.container{
显示器：flex；
弯曲方向：行；
背景：青色；
宽度：50%；
}
.信封{
显示：内联块；
位置：相对位置；
宽度：20%；
}
.信的包装：之后{
内容：''；
显示：块；
利润率最高：100%；
}
.信{
边框：1px纯黑；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}

A.
B
C
D
E

你的第一个链接，用flex:1设置班级字母，似乎已经奏效了，那么你的确切要求是什么？那么，用你上面的标记，它将是这个小小的CSS:Ooops…当然应该是这样的：你的第一个链接，用flex:1设置班级字母，似乎已经奏效了，那么，您的具体要求是什么呢？因此，使用上面的标记，它将是一个小小的CSS:oops…当然应该是这样的：

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