Перенос 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>

