How to fit the content if the absolute positioning of the block?

Question

css

Hi all. The task is as follows:
Place a block with text in the center of the parent - https://jsfiddle.net/00p6L9nn/1/, if the parent block has the required height in advance. + the parent block has a picture in the background.
Naturally, you need to use absolute positioning.
But the problem is that if the content in the block exceeds the height of the parent, then the information will go beyond the parent. For example, here is prntscr.com/f9ougu https://jsfiddle.net/00p6L9nn/2/
fit in somehow. Let's say through the increase in the parent block, and not hidden through overflow.
How to fix it?

Answer 1

Such strict conditions with absolute positioning of all blocks inside the parent are not clear.
Maybe like this: https://jsfiddle.net/ac00u8zL/ ? In the parent, which is a flex column, we stretch the image with absolute positioning and give z-index: 15, and the content is placed as it should be with z-index: 20, for example. Although it would be better to place images that will be the background in background.
If you edit your jsfiddle, then there is a JS option to measure the height of the block with content when loading and assign it to the block with the image and the parent.

Answer 2

at the parent

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

Do not make the inner block absolute

Answer 3

overflow: auto

Answer 4

z-index: 999999; in css