CSS flexbox dynamic resizing : prefer max-width

Question

I have a row flexbox container that wraps.
On the items in it, I set:

• flex: 1; so items grow to fill horizontaly the container
• min-width: X; max-width: Y;' so items stay within an acceptable size.

Here is a simple codepen example.

The problem (as viewable in the example) is the behavior of the resize-wrap.

What happens:
Each item is as small as possible so the maximum number of them is put in the first line, they then grow just as much needed to fill the line. Therefore the item's max-width is almost never reached and the items are much closer to min-width.

What I'm looking for:
Each item is as big as possible so the minimum number of them is put in the first line, they then shrink just as much needed to add a new item and fill the line. Therefore the item's min-width is almost never reached and the items are much closer to max-width.

In other words:
I want the minimum possible number of items per line, not the maximum.

Is there a way to do that in CSS without JS ?

Thanks !

Answer 1

I think what you're looking for is flex-basis, justify-content, and align-content.

#container {   background-color: green;   display: flex;   flex-flow: row wrap;   justify-content: space-around;   align-content: stretch; }  .item {   flex: 1;   flex-basis: 200px;   height: 100px;   min-width: 100px;   max-width:200px;   margin: auto;   border: solid black 2px;   background-color: red; } 

If you want the red boxes to fill the entire area, you can take the max width off the div.item.