如何让可满足的 html 元素在其容器内向下扩展

Question

如果用户在内容中写入，我希望段落仅向下增长，而 ID 为 description 的 div 则沿同一方向增长。 id 为 documentation 的最后一个父 div 保持在同一位置，因此它不会向上增长。让我们假设这段代码在 html 文档的中间。那么，我究竟如何将它固定在适当的位置，以便它朝着正确的方向生长呢？谢谢。

Index.html

<div id="documentation">
            <div id="description" >
                <p contenteditable="true"></p>
                </div>      
            </div>

Style.css

#documentation{
    border:2px solid yellow;
}

#description{
    width:500px;
    border:2px solid black;
    background-color:white;
    border-radius:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    }

#description p{
word-break:break-all;
border:2px solid red;
width:400px;    
}

Answer 1

尝试为#documentation 设置样式而不是描述

#documentation{
    border:2px solid yellow;
    height: 500px; /*or some fixed height*/
    overflow: auto;
}