Div伸展以适应内容。溢出：自动;不起作用

Question

我创建了一个由不同部分组成的长滚动网站，这些部分填满了整个屏幕。一个部分包含一些非常冗长的文本，但文本的顶部和底部部分被截断。基本上我的div不会一直伸展以适应文本。我希望我的div 能够延长至少200％。

fiddle

我已经尝试了

overflow:auto;
min-height:100%;

这就是它的样子，你可以在底部看到......文字被切断了。

如果我删除位置：绝对;整个文本向左移动，底部文本仍然被切断。

这是我的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>

和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

position:absolute它会从工作流程中删除，所以你需要删除它，你希望父div调整到高度;

还将其设置为display:inline-block，

检查fiddle

---

你在CSS中有很多语法错误，

我在这里清理了一点updated fiddle

Answer 2

尝试在css中创建一个类：

.test {
    white-space: nowrap;
}

并将其应用于你的h2：

<h2 class="test">
     //lengthy text goes here
     //lengthy text goes here
     //lengthy text goes here
</h2>