Обтекание элемента в макете журнала

Question

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

Я пробовал

float: right

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

Также пробовал flexbox, но не могу понять, как правильно использовать его для этого случая.

Пример:

Когда изображение выше:

И кодовая ручка: https://codepen.io/dnote/pen/dLWJzd

Answer 1

Хорошо, я получил его с помощью flex-box в конце, но не так, как я ожидал, и я не совсем уверен, что это "легальное" решение.

Кажется, чтоэлементы flex заполняют горизонтальное пространство в их (негибких) родительских элементах.

Мне пришлось обернуть левые элементы в элемент div и установить для свойства display каждого элемента значение flex.

#leftContent > * {
  display: flex;
}

https://codepen.io/dnote/pen/zXPmQZ