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

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

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

Повторите по образцу пример из теоретической части.

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

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

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

Повторите по образцу пример из теоретической части.

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

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

Повторите по образцу пример из теоретической части.

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

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

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

Повторите по образцу пример из теоретической части.

←→
↑