Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their container shrinks. I've come close by setting the square's height to 100% with an aspect-ratio of 1/1; and using a flex display for its container. While this approach works for the height, it falls short when scaling the width because the flex container and its content do not scale accordingly. I've simplified the code to make it easier for replication and have incorporated one of the suggested solutions which almost achieves what I'm aiming for.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.game {
width: 100%;
max-width: 500px;
height: 100%;
display: flex;
flex-direction: column;
}
.header-container {
background-color: grey;
width: 100%;
height: 15vh;
max-height: 100px;
}
.row-container {
background-color: green;
width: 100%;
height: 20vh;
max-height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
height: 100%;
width: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
}
.square {
aspect-ratio: 1/1;
flex: 0 1 100px;
background-color: blue;
margin: 5px;
}
.board-container {
background-color: aquamarine;
width: 100%;
height: 45vh;
}
.lower-container {
background-color: black;
width: 100%;
height: 30vh;
max-height: 250px;
}<div class="game">
<div class="header-container">
</div>
<div class="row-container">
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
<div class="board-container">
</div>
<div class="lower-container">
</div>
</div>The provided CSS covers all aspects, but my focus for improvement is within .square, .row, and .row-container classes.