I see this question has been asked before on here, but I couldn't seem to find a satisfactory answer. Basically what I am trying to do is create a row of divs that shrinks to a minimum size before flex wrap starts placing the divs on a second line. Here is what I have; as you can see I have flex basis set to 500px so that it's forced to wrap, but the desired outcome the boxes all shrink to 100px each until the parent div is less than 500px - margin. At that point I would like to create another row.
.app {
max-width: 50%;
display: flex;
flex-wrap: wrap;
margin-top: -1%;
margin-left: -.5%
}
.box::before {
padding-bottom: 100%;
content: '';
display: inline-block;
vertical-align: top;
}
.box {
display: flex;
flex: 1 1 500px;
margin-top: 1%;
margin-left: .5%;
width: 100%;
min-width: 100px;
justify-content: center;
align-items: center;
position: relative;
background-color: lightblue;
}
.box > div {
display: flex;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.25em;
font-size: 80%;
}<div class="app"><div class="box"><div>Mr Box</div></div><div class="box"><div>Mr Box</div></div><div class="box"><div>Mr Box</div></div><div class="box"><div>Mr Box</div></div></div>I am also open to using css grid to get this functionality if its a better solution, but since I have never used it before I don't understand how to create one with this functionality and a dynamic number of columns.