javascriptを使わずに私のフレックス列の各アイテムを正方形（高さと同じ幅）にする方法

Question

これらの文字を同じ高さと幅の行に配置したいと思います。これは私の問題のMVPですhttps://codepen.io/danielyaa5/pen/BZRVyo

これは私が見たいものです。 https://codepen.io/danielyaa5/pen/XgRYbE divの高さと幅が同じであることに注意してください。ここでは高さと幅を手動で50ピクセルに設定していますが、現実のシナリオでは、そのサイズが画面サイズに動的に設定されているため、幅はわかりません。私は、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>