Make flex item grow to available space, but keep aspect ratio

March 9, 2023

Is it possible to make flex items grow to the available space, but keep the aspect ratio? Here, I am having perfect squares, and I want to keep them as perfekt squares, but also make them grow to the vailable space that there is.

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    width: 800px;
    height: 500px;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
    background-color: lightgray;
}

.card {
    width: 50px;
    height: 50px;
    border-radius: 2px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    cursor: pointer;
    background-color: hotpink;
}

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

>Solution :

Yes, by using the CSS aspect-ratio property:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    width: 800px;
    height: 500px;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
    background-color: lightgray;
}

.card {
    aspect-ratio: 1/1;
    border-radius: 2px;
    flex: 1;
    cursor: pointer;
    background-color: hotpink;
}

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>