Перенос div тегов на новую строку без изменения его форму

Всем привет. Подскажите пожалуйста как можно делать так чтоб div элементы растянулись на всю ширину равномерно (с помощью flex-grow:1; но когда div элементы переносились то меняется размер этих элементов но я хочу чтоб высота и ширина остались 120px) и когда сужаем экран то чтоб эти div элементы переносились на новую строку с лева по очереди. Как пожалуйста скажите.

введите сюда описание изображения введите сюда описание изображения

        *{ margin: 0; padding: 0; }
        #main {
            display: flex;
            width: 100%;
            height: 100vh;
            flex-wrap: wrap;
            align-content: space-around;
        }
        #main div {
            width: 120px;
            height: 120px;
            margin: 10px;
        }
<div id="main">
    <div style="background-color:coral;"></div>
    <div style="background-color:lightblue;"></div>
    <div style="background-color:pink;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:olivedrab;"></div>
    <div style="background-color:mediumvioletred;"></div>
    <div style="background-color:salmon;"></div>
</div>


Ответы (0 шт):