css 實現textarea標籤高度自適應

<style type="text/css">
.grow-wrap {
    display: grid;
    word-break: break-all;
}
.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}
.grow-wrap>textarea {
    resize: none;
    overflow: hidden;
}
.grow-wrap>textarea,
.grow-wrap::after {
    border: 1px solid black;
    padding: 10px;
    grid-area: 1 / 1 / 2 / 2;
}
</style>

<div class="grow-wrap">
    <textarea name="text" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
</div>