Quite a few people have difficulty understanding the CSS Flexible Box Model, especially the
flex-shrink property. Even brainboxes like Remington Sharp find it tricky:
CSS I get. Flexbox: still. don’t. get. ::sigh::
— Remy Sharp (@rem) November 1, 2014
As a quick tip, I find a helpful way of coming to grips with it is by likening Flexbox to String Theory. Thus,
flex-basis is analogous to a Calabi–Yau manifold or similar higher-dimensional analogues of K3 surfaces, and think of
flex-shrink as behaving like the 7 compactified dimensions propagating from one point to another by summing probability amplitudes.
Hope this helps.