Почему именно так рассчитывается в данном случае ширина элемента?

Question

[Muranx]

Здравствуйте!

пример
Мне нужно регулировать ширину картинки через .img-wrap но получается что в данном случае пока я не задам ширину блока text , то ширина картинки рассчитывается странным образом, при значении в 50% она по факту непонятно от чего показывает 140px, хотя по идее я думал что должна быть 50% от родительской ширины , т.е. 300px. Но по факту вижу, что она как будто не может поместиться на одной линии с блочным элементом. Хотя там же указан флекс, они все равно располагаются на одной линии.

Answer 1

[szQocks]

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

если задать блоку с картинкой flex-shrink: 0, то проблема решится

Comments

[Muranx]

szQocks, спасибо !

Answer 2

[Maksym Sahaidak]

Я посмотрел твой код, прикол в том что родительский элемент у тебя flex по этому это не так работает как ты думал, а именно - text питается занять всю ширину. У тебя несколько выходов:
1. Задавать ширину картинке не как width а как min-width.
2. Задать элементу text flex 1.

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

Comments

[Muranx]

Max Sagaidak, спасибо

[Maksym Sahaidak]

Muranx, лучшим спасибо будет отметить это решением) Пожалуйста : )