Div to stretch to fit contents. Overflow: auto; does not work - html

Question

I've created a long scrolling website composed of different sections which fill up the whole screen. One Section contains some pretty lengthy text but the top and bottom parts of the text are cut off. Basically my div won't stretch all the way to accommodate the text. I would like my div to be able to stretch to at least 200% down.
fiddle
I've tried
overflow:auto;
min-height:100%;
This is what it looks like, as you can see at the bottom...the text is cut off.
If I remove Position: absolute; The whole text moves to the left and the bottom text is still cut off.
This is part of my html:
<section id="slide-15" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<h1>CV GUIDE</h1>
<br>
<h2>
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>
</div>
</div>
</section>
and part of style.css
#slide-15 .bcg {
/*position: relative;*/
background-color: #1C1C1C;
min-height: 100%;
overflow: auto;
/*padding:150px;*/
}
slide-15 .hsContent {
position: relative;
}
slide-15 .hscontainer {
width-100%
min-height: 100%;
overflow: auto;
/* position:relative;*/
}
#slide-15 h1 {
margin: 70px;
color: #ffffff;
font-size: 30px;
line-height: 20px;
position: relative;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
#slide-15 h2 {
color: #ffffff;
font-size: 14px;
line-height: 150%;
position: absolute;
line-spacing: 1px;
text-align: justify;
width: 700px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 1

with position:absolute it gets cut out of the workflow ,so you need to remove it with you want the parent div to adjust to height;
also set it to display:inline-block ,
check fiddle
You've got a lot of syntax errors in CSS,
I cleaned it up a little here's an updated fiddle

Answer 2

Try creating a class in css like this:
.test {
white-space: nowrap;
}
and apply it to your h2:
<h2 class="test">
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>