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>