Зачем нужен flex-shrink и flex-grow, если есть процентный width и min-width?
flex-shrink и flex-grow не имеют прямого отношения к размерам элемента в том плане что они не определяют размер напрямую (для этого есть flex-basis). Эти свойства определяют поведение элемента при сжатии (shrink) и расширении (grow).
Т.е. если значение этих свойств ненулевое - то элементу разрешено сжиматься / расширяться, причём с коэффициентом, определяемым значением этих свойств. При нулевом значении соответствующее изменение запрещено.
Более подробно можно почитать, например, на MDN (раз, два)
flex-shrink и flex-grow
если кратко, то они работают как по горизонтали, так и по вертикали