Understanding flex-shrink

This article was written in 2015. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

First I didn’t really understand the concept behind flex-basis until I saw how it was called in an older version of the spec: flex-preferred-size. It’s the preferred size of an item, and it often works as some kind of min-width.

The other concept I have some difficulty understanding is flex-shrink. I can understand what flex-grow does, it defines how siblings grow in relation to each other. But what does how siblings shrink in relation to each other mean? Somehow, I find this harder to understand. Lucky for us, Noah Blon wrote this excellent blog post about flex-shrink