CSS - Как увеличить размер div / изображения фона героя при вертикальном увеличении контента

Question

Я посмотрел несколько других ответов здесь, но мне не удалось решить следующую проблему в моем случае использования. У меня здесь есть кодовая ручка

У меня есть фоновая оболочка для героя пользователя со свойством background-size:cover. Вот как это выглядит в настоящее время:

Все выглядит хорошо, но если пользователь введет гораздо более длинное описание себя, то текст будет вытекать из div:

Итак, какие свойства css я должен изменить, чтобы сохранить границы пользовательского героя div и фоновое изображение к содержанию? Вот ссылка на мой код ручки

Answer 1

Проблема в том, что вы используете position: absolute; для позиционирования элементов, что выводит их из обычного потока документов. Абсолютно позиционированные дочерние элементы не растягивают своих родителей, и на их поведение не влияют братья и сестры.

Так что, в принципе, вы хотите переместить div с классом user-hero-photo-layout-container выше div с классом userheroinfowrapper-5wLB0y-layout-container в вашей HTML разметке.

А затем удалите position: absolute; из них обоих.

Вот пример того, как ваш код может выглядеть после этих меняется.