How to fix aspect ratio to 1 of elements in a flex container when flex-direction is set to column?

Question

I have several elements in a flex container (3 in this example, but I would like it to work for any number of them). They are arranged in a row on wide screens, and in a column on narrow screens. Each element contains an svg. I would like the content of the svg to have an aspect ratio of 1. The code I have works neatly on wide screens, but poorly on narrow screens. On narrow screens, the elements are not bounded in terms of height by the flex container anymore when aspect-ratio is set to 1. I am quite puzzled by this behavior and I would like to understand why. Also, I would be curious to know how to do things in order to have three vertical divs contained in the container, while each svg inside them has an aspect ratio of 1.

Here is an simple example of my code:

<style>
        .container-test{
            height:30vh;
            display:flex;
            flex-direction: row;
        }

        .col-test{
            flex:1;
            max-height:100%;}

        .wrapper{
            position:relative;
            display:block;
            max-height: 100%;
            max-width:100%;
            aspect-ratio: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .graph{
            display:block;
            height:100%;
            width:100%;
        }

        @media (max-width: 576px) {
            .container-test{
                flex-direction: column;
            }
        }
    </style>

    <div class="container-test">
        <div class="col-test">
            <div class="wrapper" >
                <svg class="graph" style="background-color:yellow; "> </svg>
            </div>
        </div>
        <div class="col-test">
            <div class="wrapper" >
                <svg class="graph" style="background-color:blue; "></svg>
            </div>
        </div>
        <div class="col-test">
            <div class="wrapper" >
                <svg class="graph" style="background-color:green;"></svg>
            </div>
        </div>
    </div>

I can make it work if I hard code the height of the .col-test (for instance setting it to 33%). However I would like have a neater solution that I could easily reuse for any number of elements.

Answer 1

you can add min-height to .col-test

<style>
  .container-test {
    height: 30vh;
    display: flex;
    flex-direction: row;
  }

  .col-test {
    flex: 1;
    max-height: 100%;
    min-height: 0;
  }

  .wrapper {
    position: relative;
    display: block;
    max-height: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-shrink: 0;
  }

  .graph {
    display: block;
    height: 100%;
    width: 100%;
  }

  @media (max-width: 576px) {
    .container-test {
      flex-direction: column;
    }
  }
</style>
<div class="container-test">
  <div class="col-test">
    <div class="wrapper">
      <svg class="graph" style="background-color: yellow"></svg>
    </div>
  </div>
  <div class="col-test">
    <div class="wrapper">
      <svg class="graph" style="background-color: blue"></svg>
    </div>
  </div>
  <div class="col-test">
    <div class="wrapper">
      <svg class="graph" style="background-color: green"></svg>
    </div>
  </div>
</div>