height: auto не работает должным образом, div не расширяется с контентом

Question

У меня возникла проблема при создании столбца для сообщений на моем веб-сайте. Вероятно, каждое сообщение будет иметь разную длину, поэтому их высота должна быть автоматической. Как-то он не работает. Не могли бы вы рассказать мне, какая часть моего кода вызывает проблему? Контейнер-контейнер не расширяется с содержимым.

Вот demo

CSS:

.ConvoCol2 { 
width: 600px; 
bottom:-50px; 
position:absolute; 
/*max-height:98vh;*/ 
margin-left: 0px; 
height:91.95vh; 
background-color:white; 
display:inline-block; 
padding-bottom:100px;} 

.Typer { 
width: 600px; 
bottom:0px; 
position:absolute; 
/*max-height:98vh;*/ 
left: 0px; 
height:100px; 
background-color:black; 
z-index:2; 
padding-bottom:100px;} 

.messageblock { 
border: 1px solid lightgrey; 
width: 600px; 
position:relative; 
top:0px; 
left:0px; 
min-height: 20px; 
height:auto;} 

.messageid { 
left: 10px; 
position:absolute; 
top:10px; 
} 

.messageid p { 
font-family:Arial; 
font-size: 1em; 
top: -15px; 
display:inline-block; 
position:absolute; 
width: 200px; 
font-weight:bold; 
left: 65px;} 

.msgcontent { 
width: 560px; 
font-family:Arial; 
position:absolute; 
left:30px; 
top: 60px; 
height:auto; 
min-height: 30px; 
word-wrap:break-word;} 

.messageid img { 
height:40px; 
width:40px; 
left: 20px; 
} 

HTML:

 <div class="ConvoCol2"> 
      <div class="messageblock"> 
       <div class="messageid"> 
        <img src="https://scontent-a-vie.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10849833_340959799423688_183902189805735256_n.jpg?oh=ea4fbcd056669d84e5459cd3918bf1c0&oe=550000F1" /> 
        <p> Name Here</p> 

       </div> 
       <div class="msgcontent"> 
        asdasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasaasdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasdasdasdasdas 
       </div> 
      </div> 


      <div class="Typer"> 

      </div> 
     </div> 

Спасибо.

Answer 1

В тот момент, когда вы используете position:absolute или position:fixed, он будет вырезан и помещен на новый слой (если вы сравните его с тем, как работает фотошоп), поэтому ваш браузер больше не «знает» размеры и просто даст его 0 height при позиционировании других элементов. Или, как @Terry отметил:

Это удалит элементы из потока документа/макета, а не будет мешать расположению других элементов или размеров их родителя (ей).

position:absolute; 
left:30px; 
top: 60px; 

Может быть, например, заменен:

margin-left:30px; 
margin-top:60px;