CSSでDIVタグのアスペクト比を必ず維持する方法を教えてください

前提

青枠の横幅を指定します
するとその中の赤枠が正方形を維持したまま最大の大きさになります (ここまでは問題なし)
次に青枠の中に赤枠と横並びになるように●を追加します
赤枠が正方形を維持したまま●のぶんだけ小さくなる (こうなって欲しいが、そうならない)

※ 青枠の横幅と●のフォントサイズは可変で決め打ちはできない想定です

※ アスペクト比を維持する方法は下のURLを参考にしました

CSSだけでアスペクト比を固定するテク
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

発生している問題

「●」を追加すると赤枠が長方形になってしまいます

該当のHTML

html
1<html>
2  <head>
3    <style>
4      * {
5        box-sizing: border-box;
6      }
7      /* 青枠 */
8      .box1 {
9        display: flex;
10        flex-direction: row; /* 横並び */
11        align-items: center;
12        justify-content: center;
13        border: 4px solid blue;
14        width: 20vw;      /* .box1 の横幅は可変 */
15        font-size: 100px; /* ●のフォントサイズも可変です */
16      }
17      /* 赤枠 */
18      .box2 {
19        position: relative;
20        width: 100%;
21        padding-top: 100%; /* 正方形の比率とする */
22      }
23      .box3 {
24        position: absolute;
25        top: 0;
26        left: 0;
27        width: 100%;
28        height: 100%;
29        border: 4px dashed red;
30      }
31    </style>
32  </head>
33  <body>
34    <div class="box1">
35      ●
36      <div class="box2">
37        <div class="box3"></div>
38      </div>
39    </div>
40  </body>
41</html>

こうなってしまう

CSS で縦幅を、横幅の 100% (padding-topの値) としているのに、赤枠の中が長方形になってしまう

こんな感じになって欲しい

※このイメージは画像加工で作成

赤枠の中は正方形を維持している

試したこと

flex-basis, flex-grow, flex-shrink を指定したが、正方形になりませんでした

補足情報

ブラウザは Google Chrome で確認しています

行動規範の内容に同意します

回答1件

ベストアンサー

下記のような感じでしょうか。

css
1* {
2  box-sizing: border-box;
3}
4/* 青枠 */
5.box1 {
6  display: flex;
7  flex-direction: row; /* 横並び */
8  align-items: center;
9  justify-content: center;
10  border: 4px solid blue;
11  width: 20vw;      /* .box1 の横幅は可変 */
12  font-size: 100px; /* ●のフォントサイズも可変です */
13  line-height: 1em;
14}
15/* 赤枠 */
16.box2 {
17  position: relative;
18  width: 100%;
19}
20.box3 {
21  width: 100%;
22  padding-top: 100%; /* 正方形の比率とする */
23  border: 4px dashed red;
24}