如何在具有最大高度的 contenteditable div 中显示滚动条？

Question

我有一个div与contenteditable标签设置为true。
此外，我已经添加了width，height等使用CSS。

然后这是结果：

#stringinput {
    min-width: 20em;
    min-height: 1.4em;
    max-width: 40em;
    max-height: 10em;
    padding: 0.3em 0.5em 0 0.5em;
    background-color: white;
    font-size: larger;
    text-align: left;
    border: 3px solid black;
    border-radius: 5px;
}

<div contenteditable="true" id="stringinput" spellcheck="false"></div>

它工作正常，但是当您输入并达到max-height限制时，div 向下扩展，但边框保持在应有的位置。

所以，我希望当有人达到max-height限制时出现一个滚动条，这样 div 就不会进一步向下扩展。我该怎么做？

Answer 1

overflow-y: auto;像这样插入：

#stringinput {
    overflow-y: auto;
   //More code
}

完整代码：

#stringinput {
    overflow-y: auto;
   //More code
}

#stringinput {
    min-width: 20em;
    min-height: 1.4em;
    max-width: 40em;
    max-height: 10em;
    padding: 0.3em 0.5em 0 0.5em;
    background-color: white;
    font-size: larger;
    text-align: left;
    border: 3px solid black;
    border-radius: 5px;
    overflow-y: auto;
}

overflow-y: auto当达到max-height（y 轴）限制时，该属性会自动启用滚动条。