It looks like I was wrong about that last comment. What I was referring too as 'remaining space available' is actually different for flex grow and flex shrink.
Looking back at the Codrops Flexbox Reference they define the space as 'free space'.
flex-grow
distributes the positive free space
whileflex-shrink
distributes the negative free space
The conditions which create those spaces are the opposite. As Paul explained above the positive free space is created when the total content does not fill the parent's width.
It appears that negative free space is defined as total content space that exceeds the parent's width.
According to the flex-shrink summary at codrops, they define the negative free space as...
If the sum of the main sizes (see concepts and terminology) of all flex items is greater than the main size of the flex container, you can specify just by how much you want to âshrinkâ the flex items. The amount by which the flex itemsâ main sizes exceed the containerâs main size is the negative space. Using the flex-shrink property, you can distribute this negative space over the flex items. The negative space is distributed in proportion to flex-basis multiplied by the flex-shrink ratio, where the flex basis is the initial main size of the flex item, before free space is distributed according to the flex factors.
So the flex factor vs. free space condition's are opposite between flex grow and flex shrink.
I suspect the intention of the flex-shrink default value being (1) is that it will be needed more often than than flex grow will.
Initial value of the flex shorthand:
flex-grow: 0
flex-shrink: 1
flex-basis: auto
"The devil is in the details", I think I got it right this time.
One thing I do know, is that the best way for ME to learn is when the code I write actually does what the specs say it should be doing. Then it sinks in and gets logged in my noodle.