Flexbox square items independent of item count - html

Question

I use some inline styling in the HTML Doc. I would like to achieve a flexbox with n divisions where divs are squared. Within these divs I want to add certain images (here a placeholder)
I was looking up some other threads where there was padding used as a measure to adjust the box "height" since it is calculated upon width. However this solution only expands the current box in height (outlined with the blue border).
Has anyone a tip on how to avoid this?
EDIT: Apparently the padding solution works while using units like vh and vw instead of percentage and as long as I do not insert an image
.container {
position: relative;
width: 90%;
max-height: 35%;
display: flex;
margin: 5%;
border: 5px solid black;
justify-content: space-around;
}
.box {
position: relative;
width: 100%;
margin: 2.5%;
border: 5px solid blue;
overflow: hidden;
}
.image {
position: relative;
width: 100%;
}
<div class="container">
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>

Answer 1

We now have access to aspect-ratio in CSS although it is poorly supported at the time of writing.
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
.container {
width: 90%;
max-height: 35%;
display: flex;
margin: 5%;
border: 5px solid black;
justify-content: space-around;
}
.box {
margin: 2.5%;
flex: 1;
aspect-ratio: 1;
border: 5px solid blue;
overflow: hidden;
}
.image {
max-width: 100%;
display: block;
}
<div class="container">
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>

Answer 2

To manage this, there is a little known trick (tbh I didn't know you could do this) with setting an aspect ratio on divs of unknown/dynamic widths. See this article.
I ended up adding position: absolute for the images to not mess with the height of the divs after applying this 1:1 ratio for your scenario:
.box:before {
content: "";
float: left;
padding-top: 100%; /* initial ratio of 1:1*/
}
This might be what you are trying to do:
.container {
position: relative;
width: 90%;
max-height: 35%;
display: flex;
margin: 5%;
border: 5px solid black;
justify-content: space-around;
}
.box {
position: relative;
width: 100%;
margin: 2.5%;
border: 5px solid blue;
overflow: hidden;
}
.box:before {
content: "";
float: left;
padding-top: 100%; /* initial ratio of 1:1*/
}
.image {
position: absolute;
width: 100%;
}
<div class="container">
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>