Решение предыдущего задания: коэффициенты должны быть 1 и 1.

Давайте рассчитаем размеры элементов из предыдущего задания и убедимся в правильности описанного алгоритма.

Отрицательное пространство = 200px - 100px - 300px = -200px

Сумма произведений размеров на коэффициенты = (1 * 100px) + (1 * 300px) = 400px

Нормированный коэффициент 1 элемента = (1 * 100px) / 400px = 0.25
Нормированный коэффициент 2 элемента = (1 * 300px) / 400px = 0.75

Итоговый размер 1 элемента = 100px - (200px * 0.25) = 50px
Итоговый размер 2 элемента = 300px - (200px * 0.75) = 150px

Есть несколько тонкостей, касающихся сжатия флекс-элементов:

• элементы сжимаются в пределах своих базовых размеров, внутренние отступы и рамки не сжимаются;
• «ограничительные» свойства, такие как min-width, применяются к элементам после этапа перераспределения свободного места или отрицательного пространства.

И эти тонкости могут приводить к неожиданным эффектам, когда элементы выпадают из флекс-контейнера. Давайте поэкспериментируем.