Блок на flex, картинка + текст, как сделать чтобы текст обтекал картинку?

Question

[Антон Вебсайтовский]

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

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

Вот рабочий пример:
https://jsfiddle.net/chsdjmx3/1/

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

Answer 1

[Даниил Маслов]

Используйте старый добрый float для такого поведения.

Comments

[Антон Вебсайтовский]

О как просто ), float: left;
А я с флексами обычно не применяю эти стили ) и дисплай инлайн блок.
Думал раз флекс то все на флексе )

[Антон Вебсайтовский]

Спасибо.

[Антон Вебсайтовский]

А как быть если нет текста, то там картинка выходит за рамки.
вот пример: https://jsfiddle.net/qeupno92/

[Даниил Маслов]

Антон Вебсайтовский, https://webref.ru/course/float/clearfix

[Антон Вебсайтовский]

s0xzwasd, я так и не хотел делать ) думал по другому решить можно ) чем пихать див костыльный.

[Даниил Маслов]

Антон Вебсайтовский, ну если у кого-то будут другие идеи, как сделать такое поведение, то отпишутся :)

[Антон Вебсайтовский]

s0xzwasd, верно ) а то я от этого метода отошел )