Css чтобы сохранить соотношение сторон по ширине и высоте, когда я добавляю элемент сбоку, а другой элемент становится меньше

Question

У меня есть макет, где я добавляю новые элементы справа от существующего элемента, чтобы заполнить пространство. Но элемент должен сохранять соотношение сторон. Предположим, 4: 3.

Теперь, когда я добавлю второй элемент, первый элемент будет меньше. Я использую flex.

Пример:

HTML

<div class="container">
    <div class="box box-1">
        <div class="h-box">box 1</div>
        <div class="h-box">box 2</div>
        <div class="h-box">box 3</div>
        <div class="h-box">box 4</div>
        <div class="h-box">box 5</div>
    </div>
</div>

CSS

html,
body {
    height: 100%;
}

.container {
    height: 100%;
  min-height: 100%;
    display: flex;
    flex-direction: column;

    .box {
        text-align: center;
        color: white;
        font-family: sans-serif;
        font-size: 36px;
        padding: 20px;
        width: auto;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
    justify-content: center;
    }

    .h-box {
        text-align: center;
        color: white;
        font-family: sans-serif;
        font-size: 36px;
        flex-grow: 1;
    justify-content: center;
    }

    .box-1 {
        background-color: green;
        flex: 1;
        display: flex;
        flex-direction: row;
    }

}

Элемент становится меньше по ширине , но высота остается такой же. Что я хочу, так это уменьшить высоту, чтобы сохранить соотношение сторон.

Поэтому, когда я добавляю прямоугольник горизонтально, другие боксы уменьшаются при сгибании, чтобы поместиться в один ряд.