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

Posted 2023-03-05

【中文标题】如何让可满足的 html 元素在其容器内向下扩展

【英文标题】：How to get the contentedible html element to expand downward inside its container

【发布时间】：2022-01-23 22:42:48

【问题描述】：

如果用户在内容中写入，我希望段落仅向下增长，而 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;    

【问题讨论】：

似乎对我有用，我对这个问题感到困惑。

【参考方案1】：

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

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