如何在<textarea>不使用javascript的情况下仅使用css自动将高度调整为内部文本的高度？

Question

是否可以只使用css而不使用javascript自动将高度调整为内容的高度？

例如，当的高度是200px时，当里面的文本的高度只有100px时，我希望不会有空格。

我希望中文本的高度影响其本身的高度。有一种方法可以在整个互联网上使用javascript。但我想只使用css和html来实现它。我需要帮助！

这是我的密码。

.code-wrap {
margin-top: 8px;
border-radius: 8px;
background: #1e1e1e;
max-height: 400px;
}
.code-title {
border-radius: 8px 8px 0 0;
background: #242E64;
padding: 21px 24px;
}
.area-wrap {
padding: 21px 24px;
}
textarea {
border: 0;
resize: none;
width: 100%;
height: 300px;
outline: none;
font-size: 20px;
font-weight: 800;
color: #fff;
background: none;
font-family: 'D2Coding';
}

<div class="code-wrap">
<div class="code-title"><p>Result</p></div>
<div class="area-wrap">
<textarea
rows="15"
cols="50"
name="quiz-editor"
id="mainResultArea"
class="ed-result"
readOnly
>
</textarea>
</div>
</div>

Answer 1

不幸的是，据我所知，使用原始CSS或HTML并没有很好的方法。但是，您可以偏离textarea元素，在div或text元素上使用contentEditable属性。

看看这个基本的例子&在这个示例文本框中写入：

div {
border: solid 1px;
padding: 5px;
width: 300px;
min-height: 50px;
overflow: auto;
}

<div contentEditable></div>