In the section about flex-basis, I thought the effect of flex-basis: 0% is similar with flex-basis: auto or no effect like 0 in flex-grow and flex-shrink.
So after I edit CSS and add this snippet:

flex-grow: 2;
flex-shrink: 0;
flex-basis: 0%;

I thought flex-shrink: 0 doesn't work at all because flex items look like they are "shrinking".
After fiddling with flex-basis: 0, I noticed that it will cause the width of flex items as narrow as possible.
So, in this case, flex-shrink even has no opportunity to do any thing about shrink.
The auto adjusting according to the width of viewport is all done by flex-grow property.

In case others would have same confusion as I did, it maybe better to add some details about flex-basis: 0 I think.