元素不会展开以包含子内容

Question

我正在构建一个论坛，因此我正在构建一个新 post 的预览。也是为了我论坛每个post的排版。当我在段落中添加一些文本时，我添加的越多，它就会变得越长，但这不是我之前问过的问题。

我的问题是，正如您在下面的代码（完整页面视图）中看到的那样，通过向我的段落添加文本，容器不会增长。我只是输入了一些虚拟文本，以便您可以看到我的问题所在。

#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

为文本所在的容器添加顶部和底部填充。

元素不会展开以包含子内容

Elements do not expand to contain child content

html

css

height