Каково объяснение выбора такого способа расчета ширины элемента в данном случае?

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

Свойство `width: 50%;` устанавливает ширину элемента в 50% от ширины его родителя. Это означает, что элемент будет занимать половину доступного пространства внутри родительского блока.

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

Чтобы предотвратить это, можно использовать свойство `max-width` для задания максимальной ширины картинки. Например, `max-width: 100%;` гарантирует, что ширина картинки никогда не будет превышать ширины родителя.

Таким образом, комбинирование свойств `width: 50%;` и `max-width: 100%;` позволяет регулировать ширину картинки так, чтобы она занимала 50% от ширины родительского блока, но при этом не выходила за его пределы.

У flex-элементов по умолчанию установлено свойство flex-shrink: 1, что означает, что они могут сжиматься. В твоем случае блок с текстом сжимает блок с картинкой, так как занимает больше 50% ширины родителя при большом количестве текста. Если бы в блоке с текстом было только одно слово, тогда было бы видно, что ширина блока с картинкой работает от родителя. Ты можешь решить эту проблему, задав блоку с картинкой свойство flex-shrink: 0.