I want the width to be decided by the container width and the then the height of each item equal to the width. Can’t get it working though Here is a codepen.
Any help appreciated!
<div>
<img class = "icon" src = "http://via.placeholder.com/100x100">
<img class = "icon" src = "http://via.placeholder.com/100x100">
<img class = "icon" src = "http://via.placeholder.com/100x100">
<img class = "icon" src = "http://via.placeholder.com/100x100">
<img class = "icon" src = "http://via.placeholder.com/100x100">
<img class = "icon" src = "http://via.placeholder.com/100x100">
<img class = "icon" src = "http://via.placeholder.com/100x100">
<img class = "icon" src = "http://via.placeholder.com/100x100">
</div>
div {
display : flex;
flex-flow : row wrap;
width : 200px;
height : auto;
border : solid;
}
.icon {
margin : 2%;
flex : 1 1 20%;
height : auto;
min-width : 0;
max-width : 25%;
min-height : 0;
}