Ankhena, Заметил всю эту странность флексов, только после того как начал изучать адаптивную верстку mobile first и desctop. До этого верстал (практика) под десктопные версии (отображается на больших экранах - норм, значит всё делаю правильно). Но, когда залез в адаптив, понял, что где-то не доучил(не дочитал, тот же момент с флек элементами и минимальной шириной для них).
Спасибо за ответ)))
xdevelx, поправте меня, если не правильно понял:
для флекс элементов min-width: auto -по умолчанию(если честно не знал что именнопо умолчанию(((), а это значить в случае (вариант 2,3 без div) , когда img является флекс.элем. он не может сжаться меньше своего минимального содержимого контента ( такая же ситуация будет с текстом "пенополистиролбетонных" , меньше текст сжаться не может) данном случае это реальный размер картинки в пикселях и она вылезает за пределы флексбокс контейнера если очень большая. В первом варианте, как только помещаю img в флексбокс элемент(div) проценты max-width для img считаются от ширины div. Флексбокс элементы в Варианте 1 сжимаются потому что по умолчанию у них установлено свойство flex-shrink: 1
А у картинки есть такое свойство адаптироваться по размерам под родительский контейнер если указано width или height в процентах( в данном случае max-width)
Написано
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Спасибо за ответ)))