Невозможно настроить обтекание текстом вокруг изображения SVG. ⇐ CSS

[Гость]

Я пытаюсь обернуть IMG внутри диапазона, чтобы его родительский DIV имел ширину, равную этому img + диапазон.

.mainDiv { высота: макс-контент; ширина: максимальное содержимое; граница: сплошная 1 пиксель #bebdbd; отступ: 5 пикселей; } /* .mainText { дисплей: гибкий; }*/ .mainImg { плыть налево; максимальная ширина: 20 пикселей;

строка_1
линия_2

Если я использую flex для диапазона, строка после IMG разрывается.

Если я этого не сделаю - 'width: max-content' для родительского DIV не работает. Кроме того, текст не оборачивает IMG.





Третья картинка — то, что я ожидаю.

Что я делаю не так?

PS: обычно рекомендуется использовать для IMG значение «float: left». Как видите - здесь это не работает.

UPD: ошибка повторяется только тогда, когда я вставляю SVG в качестве IMG. Если используется JPG, он работает нормально (без гибкости)