Как вместить содержимое, если абсолютное позиционирование у блока?

Question

[l55uiz]

Привет всем. Задачка следующая:
Разместить блок с текстом по центру родительского - https://jsfiddle.net/00p6L9nn/1/, если у родительского блока заранее стоит необходимая высота. + у родительского блока на фоне картинка.
Естественно, нужно использовать абсолютное позиционирование.
Но проблема в том, что, если содержание в блоке будет превышать высоту родительского, то информация будет выходить за пределы родительского. Например, вот это prntscr.com/f9ougu https://jsfiddle.net/00p6L9nn/2/
Эта информация должна быть видна, т.к. вмещаться как-то. Допустим, через увеличение родительского блока, а не скрыта через overflow.
Как это исправить?

Comments

[tyzberd]

структуру html не можете поменять?
текст модно так выравнивать https://css-tricks.com/centering-in-the-unknown/
картинку через css добавить

[l55uiz]

tyzberd: картинка добавляется на задний фон через админку. Не вариант добавлять через css.

[alvvi]

l55uiz: а добавлять инлайн css через админку запрещают законы Шириата?

Answer 1

[Андрей]

Не понятны такие строгие условия с абсолютным позиционированием всех блоков внутри родителя.
Может вот так подойдет: https://jsfiddle.net/ac00u8zL/ ? В родителе, который флекс колонка, растягиваем абсолютным позиционированием картинку и даем z-index: 15, а контент размещается так как ему и положено правилами с z-index: 20, например. Хотя лучше бы изображения которые будут фоном таки помещать в background.

Если же править твой jsfiddle то есть вариант JS'ом при загрузке замерять высоту у блока с контентом и присваивать ее блку с картинкой и родителю.

Answer 2

[Андрей Гончаров]

у родителя

display:flex;
align-item: center;
justify-content: center;
min-height: XXX

Внутренний блок не делать абослютным

Comments

[l55uiz]

без абсолютного позиционирования не подойдет. У родительского кроме этого блока есть еще блок с картинкой. Вот на эту картинку и помещается этот текст. В итоге, получается тоже самое, что и сейчас)

Answer 3

[Negwereth]

overflow: auto

Comments

[l55uiz]

Нет, эта информация должна быть видна, а не скрыта. (добавлю в 1-й пост)

[Negwereth]

l55uiz: то есть вы искренне желаете попрать законы физики и геометрии и впихнуть невпихуемое?

Как вы себе представляете решение этой задачи? Не привязываясь к реализации, опишите, пожалуйста, своё видение.

Answer 4

[Kejin]

z-index: 999999; в css