When a user inputs content, I need the paragraph to expand only downward while the div with the ID of description also grows in the same direction. The main parent div labeled documentation should remain fixed so it doesn't expand upwards. This scenario assumes that this code block is located within the middle of the HTML document. So, how can I anchor it correctly in place to ensure it expands in the desired direction? Thank you.
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;
}