Home>
Premise
  1. Specify the width of the blue frame
  2. Then the red frame in it will be the maximum size while maintaining the square (no problem so far)
  3. Next, add ● in the blue frame so that it is side by side with the red frame.
  4. The red frame keeps the square and becomes smaller by the amount of ● (I want this, but it does not)

* The width of the blue frame and the font size of ● are variable and cannot be fixed.

* Refer to the URL below for how to maintain the aspect ratio.

Tech to fix aspect ratio only with CSS
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

The problem i am having

If i add "●", the red frame will become rectangular.

Corresponding HTML
<html>
<head>
  <style>
      * {
        box-sizing: border-box;
      }
     /* Blue frame * /
      .box1 {
        display: flex;
        flex-direction: row;/* side by side * /
        align-items: center;
        justify-content: center;
        border: 4px solid blue;
        width: 20vw;/* The width of .box1 is variable * /
        font-size: 100px;/* ● The font size is also variable * /
      }
      /* Red frame */
      .box2 {
        position: relative;
        width: 100%;
        padding-top: 100%;/* Square ratio * /
      }
      .box3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 4px dashed red;
      }
  </style>
</head>
<body>
    
      ●
      
         
      
    
</body>
</html>
It will be like this

Even though the vertical width is set to 100% of the horizontal width (padding-top value) in CSS, the inside of the red frame becomes a rectangle.

I want you to look like this


* This image is created by image processing

The inside of the red frame maintains a square

What I tried

I specified flex-basis, flex-grow, flex-shrink, but it didn't become a square

Supplementary information

Browser is confirmed with Google Chrome

  • Answer # 1

    Is it like the following?

    * {
      box-sizing: border-box;
    }
    / * Blue frame * /
    .box1 {
      display: flex;
      flex-direction: row;/* side by side * /
      align-items: center;
      justify-content: center;
      border: 4px solid blue;
      width: 20vw;/* The width of .box1 is variable * /
      font-size: 100px;/* ● The font size is also variable * /
      line-height: 1em;
    }
    /* Red frame */
    .box2 {
      position: relative;
      width: 100%;
    }
    .box3 {
      width: 100%;
      padding-top: 100%;/* Square ratio * /
      border: 4px dashed red;
    }

    CodePen sample