Сжатие flex блоков при недостатке места

Пусть у нас есть три флекс-блока, расположенных внутри родителя в ряд. Каждому блоку-потомку задана ширина в 100px, а их родителю - 300px:

Давайте добавим больше блоков так, чтобы суммарная ширина этих блоков-потомков была больше, чем ширина их родителя. В этом случае вы увидите неожиданный эффект - ширина блоков уменьшится так, чтобы они все вместились в их родителя, ни смотря на то, что блокам-потомкам явно указана ширина:

Ширина родителя в процентах

Пусть у нас теперь есть пять флекс-элементов, расположенных в ряд. Давайте родителю ширину зададим в процентах, а всем теперь потомкам поставим ширину в 100px.

Откройте расположенный ниже пример и уменьшите окно браузера так, чтобы элементы перестали помещаться в родителя. Для этого окно нужно сжать менее 500px, так у нас 5 элементов каждый по 100px. Как вы уже знаете, при таком сжатии браузер принудительно уменьшит ширину элементов менее 100px так, чтобы они поместились в родителя. Итак, вот пример:

Разная ширина потомкам

Давайте теперь всем потомкам поставим ширину 100px, а второму потомку - в полтора раза больше, то есть 150px. В таком случае при уменьшении окна браузера все элементы будут уменьшаться менее заданной ширины, однако пропорции будут сохранятся - второй элемент будет в 1.5 раза больше остальных. И только если сжать окно очень-очень сильно, так, чтобы уже совсем не было места, то отличие второго элемента от остальных исчезнет:

Жадность элементам

Давайте теперь посмотрим влияние жадности. Уберем всем потомкам ширину и поставим им потомкам flex-grow в значение 1, а второму потомку - в значение 3. В результате получится, что второй блок будет в 3 раза больше остальных.

Однако, если сжать окно достаточно сильно, то второй блок уже не будет больше остальных в 3 раза - при сильном сжатии разница стирается. Убедитесь в этом сами, поигравшись с приведенным ниже примером, расширяя и сужая окно брузера: