Как растянуть дочерние блоки на фиксированную высоту блока родителя?

Question

[pashjka]

Всем привет! Помогите, пожалуйста, с версткой
При моем варианте картинка занимает всю высоту родителя, а остальной контент вываливается за пределы родительского блока.
Нужно, чтобы картинка и контент растягивались, если надо, то сжимались и помещались в ограниченный высотой родительский блок (фото прилагаю).


картинка больше по высоте чем 300px

Comments

[Ankhena]

А если текста больше чем на 300px, куда должны деваться излишки и что должно происходить с картинкой?

Вообще это больше проблемы с геометрией, а не с флексами.

Как только вы поймете геометрию, останется переписать это на css. (Можно на гриды, будет удобнее)

[pashjka]

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

про геометрию не понял, что вы имеете ввиду?

[Ankhena]

pashjka, вам поможет:
1. max-height для ограничения высоты блока и картинки
2. overflow для включения прокрутки для текста (или скрытия его вовсе), когда он выпадет из блока.
3. flex-grow, чтобы растянуть блок с текстом на всю оставшуюся от картинки высоту (альтернатива единицы fr у грида)
4. object-fit для вписывания картинки в блок
5. aspect-ratio или хак с паддингом (гуглится) для пропорций
6. flex-direction: column, если вы вообще про него забыли (это так, на всякий пожарный).

Ну а теперь показывайте, что вы делали и что не получилось на codepen.io так, чтобы была видна проблема.