Co se vizuálně změní přidáním flex-shrink: 0 k modrému prvku v kontejneru s display:flex, šířkou 700px a dětmi o šířce 300px?

Если у родительского элемента с display:flex и шириной 700px есть дочерние элементы шириной по 300px, то без дополнительных стилей они будут пытаться уместиться в одну строку. Три элемента по 300px не помещаются (900px > 700px), поэтому flex-контейнер применит сжатие (flex-shrink) к ним по умолчанию.

При добавлении flex-shrink: 0 к синему элементу:

• Синий элемент перестанет сжиматься и сохранит ширину 300px.
• Остальные элементы (без flex-shrink:0) будут сжиматься, чтобы уместиться в 700px.
• Если суммарная ширина элементов без сжатия больше 700px, то синий элемент останется 300px, а остальные уменьшатся в ширине.

Визуально это значит, что синий элемент сохранит свою ширину, а остальные станут уже, чем 300px, чтобы вписаться в контейнер. Если синий элемент был, например, последним, то он не уменьшится, а остальные — да.