Flex grow css что это?

Flex-grow показывает, как flex-элемент участвует в распределении положительного свободного места по главной оси. Значение 0 не дает ему расти за счет такого распределения, а положительные коэффициенты задают относительные доли добавки. Например, два элемента имеют базовые размеры по 100px, контейнер имеет ширину 500px, отступов и других ограничений нет. Остается 300px. При grow: 1 у первого и grow: 2 у второго добавки будут 100px и 200px. Итоговые ширины составят 200px и 300px, а не отношение один к двум. Именно поэтому ваш вывод о двойной ширине не сработал. Коэффициенты относятся к распределяемому месту, а не напрямую к окончательным размерам коробок. Если свободного места нет, увеличенный grow сам по себе не создаст дополнительную ширину контейнера. При нехватке места работает другой механизм, flex-shrink. Базу задает flex-basis с учетом направления и модели размеров, поэтому изменение width не всегда меняет отправную точку так, как вы ожидаете. Когда нужны примерно равные гибкие колонки, часто используют одинаковую нулевую базу и одинаковый рост, но содержимое и минимальные размеры все равно проверяют отдельно. В реальной раскладке из доступной области приходится учитывать промежутки, границы и другие участники потока. Ограничение max-width может остановить рост одного элемента и изменить распределение оставшегося места. Для отладки начните с двух пустых блоков без отступов и сравните их рассчитанные размеры. После понятного результата возвращайте текст и оформление. В направлении column рост относится к главному вертикальному размеру, поэтому нельзя всегда считать его увеличением ширины.