How can I allow flex-items to grow while keeping the same size?

Question

Flexbox is one of the coolest tools a web designer could wish for. Unfortunately, sometimes it\'s not immediately obvious what I\'m supposed to do. Take, for example, this p

Answer 1

This is something that cannot be expressed via CSS Flexbox right now. Someone asked basically this exact question on the CSS Working Group Mailing List a few days ago, and the response was: "At the moment, no, this is not possible. This is a high-priority item for Flexbox 2, though.

You may be able to hack up something like you want using max-width, though -- that'll prevent flex items (particularly those on the last line) from growing indefinitely. Here's a forked version of your plunk with a nonzero flex-grow, and with max-width: 10em.

(I chose 10em arbitrarily; you could also use e.g. max-width: calc(100%/5), if you want to make sure each flex item takes up no more than 1/5 of the line, for example.)

Answer 2

I achieved what you were looking for by adjusting flex-shrink.

.recipe-picker recipe {
flex: 0 0 8em;
}

I try to think of flex-grow and flex-shrink as "permission to expand". When either has a value, that means the element has permission to grow. When all elements have flex-grow, they will expand to the same size. But, the same rule holds true if they all have a flex-shrink value, too.

http://plnkr.co/edit/sxHUzIRPlbstpOzoGcR6?p=preview

Answer 3

I had the exact same problem, and managed to find a fully working workaround to deal with this flexbox shortcoming.

Given that this is a duplicate of this other question, and it would be wrong to copy my answer here again, I'm going to link to it, for those Googlers who find themselves here and not there:

How to keep wrapped flex-items the same width as the elements on the previous row?