Элементы не расширяются, чтобы содержать контент для детей

Question

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

Моя проблема заключается в том, что вы видите в приведенном ниже коде (полное представление), что контейнер не растет, добавляя текст к моему абзацу. Я просто вставляю какой-то фиктивный текст, чтобы вы могли понять, в чем моя проблема.

#prevContainer { 
 
    width:95%; 
 
    background-color:white; 
 
    opacity:1; 
 
    border-radius: 10px; 
 
    margin:0 auto; 
 
    min-height:150px; 
 
    height:auto; 
 
    margin-top: 10px; 
 
    margin-bottom:10px; 
 
    border:2px solid grey; 
 
} 
 
#prevContainer #left { 
 
    border-right:2px solid grey; 
 
    width: 120px; 
 
    min-height:150px; 
 
    height:auto; 
 
    float:left; 
 
} 
 
#prevContainer #left #prevAvatar { 
 
    border:1px solid black; 
 
    border-radius:10px; 
 
    margin:0 auto; 
 
    width:100px; 
 
    margin-left:10px; 
 
    margin-top:0px; 
 
} 
 
#prevContainer #right { 
 
    float:left; 
 
    margin-left:0px; 
 
    margin-top:0px; 
 
    min-height: 150px; 
 
    height:auto; 
 
    min-width:200px; 
 
    width:500px; 
 
    max-width: 517px; 
 
} 
 
#prevContainer #right #text { 
 
    margin-left:10px; 
 
} 
 
#prevContainer #right #text #prevOutput { 
 
    background-color:yellow; 
 
    white-space: pre-wrap; 
 
    word-break: break-all; 
 
    font-size:16px; 
 
}

<div id="prevContainer"> 
 
           <div id="left"> 
 
            <img id="prevAvatar" src="" alt="Avatar"/> 
 
           </div> 
 
           <div id="right"> 
 
            <div id="text"> 
 
             <p id="prevOutput"> 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             I HOPE THIS WORKS I HOPE THIS WORKS 
 
             
 
             
 
             
 
             </p> 
 
            </div> 
 
            <!--<button id="button">New Post</button>--> 
 
           </div> 
 
          </div>

Заранее спасибо

Answer 1

Вы не очищая поплавки. Вы можете добавить overflow: hidden; к #prevContainer или использованию:

#prevContainer:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

Answer 2

Добавить верхние и нижние отступы к контейнерам, что текст идет в