CSS stretch parent div to max height of overlaid children - html

Question

I am overlaying some title text on an image, currently using relative/absolute position for one of the elements (doesn't matter which). What I am struggling with is getting the parent div to fully display the content of both, irrespective of which is taller.
Example markup:
.parent {
position: relative;
overflow: hidden;
width: 100px; /* This is only here to force the title text in this example to expand beyond the image height for illustrative purposes. */
}
.background {
width: 100%;
}
.title-text {
position: absolute;
top: 0;
font-size: 32px;
color: blue;
}
<div class="parent">
<img class="background" src="http://www.placebacon.net/200/200">
<div class="title-text">
My Title (which might be quite long)
</div>
<div>
(Assuming I can acheive what I am looking for, the overflow: hidden above would obviously become redundant, but presently without it, the taller element overlaps whatever is below the parent div.)
JSBin here: http://jsbin.com/yixiniwere/edit?html,css,output
How do I get both elements to be fully visible? I can change the mark-up or introduce additional container elements if necessary.

Answer 1

You can overlay elements without using positioning under CSS-Grid. You just assign them the same place in the grid.
.parent {
/* IE10/11 support */
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
margin: 1em auto;
display: grid;
width: 400px;
/* for demo purposes */
grid-template-columns: 1fr;
grid-template-rows: auto;
background: pink;
}
.parent * {
/* IE10/11 support */
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1/2;
grid-row: 1;
color: red;
}
<div class="parent">
<img class="background" src="http://www.placebacon.net/400/200">
<div class="title-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum perspiciatis commodi, adipisci reiciendis quo suscipit! Ratione laborum magnam cumque tempora ab cupiditate delectus, perferendis enim porro impedit nihil architecto, ad consequatur exercitationem
fugiat error debitis molestias itaque, eligendi necessitatibus quae dolore beatae nemo doloremque. Quos voluptate tenetur explicabo beatae nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est perspiciatis possimus iusto! Voluptatem
facilis blanditiis aspernatur facere animi placeat. Quisquam fuga laudantium cupiditate eos exercitationem neque eius, distinctio consectetur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam, ipsum tempora reiciendis, id ea
eveniet placeat necessitatibus deserunt mollitia dignissimos exercitationem aliquam porro quaerat, labore ducimus rerum animi praesentium?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, laboriosam.
<div>

Answer 2

Another option could be to get rid of relative and absolute positioning and only set the 'margin-top' property of the text to the negative value of the background. Example (if the icon has fixed height of 100px you can just set margin top of title-text to -100px):
.parent {
width: 150px;
}
.background {
width: 100%;
}
.title-text {
margin-top:-100px;
width:100%;
font-size: 20px;
}
if the height of the background in not fixed you should be able to get it via javascript and set it there.
js bin example

Answer 3

The non css grid/flexboxy way
.parent {
position: relative;
width: 300px;
margin: 0 auto;
background: #a03;
}
img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.title-text {
position: absolute;
z-index: 10;
}
<div class="parent">
<img class="background" src="https://images.unsplash.com/photo-1472837525377-e96df4f8f34e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b29757bb040fca6a9b0d79cbd31f1119">
<div class="title-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum perspiciatis commodi, adipisci reiciendis quo suscipit! Ratione laborum magnam cumque tempora ab cupiditate delectus, perferendis enim porro impedit nihil architecto, ad consequatur exercitationem fugiat error debitis molestias itaque, eligendi necessitatibus quae dolore beatae nemo doloremque. Quos voluptate tenetur explicabo beatae nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est perspiciatis possimus iusto! Voluptatem facilis blanditiis aspernatur facere animi placeat. Quisquam fuga laudantium cupiditate eos exercitationem neque eius, distinctio consectetur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam, ipsum tempora reiciendis, id ea eveniet placeat necessitatibus deserunt mollitia dignissimos exercitationem aliquam porro quaerat, labore ducimus rerum animi praesentium?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, laboriosam.
<div>
</div>