<h1>Auto-Growing <code>&lt;textarea></code></h1>

<form action="#0">
  <label for="text">Text:</label>
  <div class="grow-wrap">
    <textarea
      name="text"
      id="text"
      onInput="this.parentNode.dataset.replicatedValue = this.value"
    ></textarea>
  </div>
</form>

.grow-wrap {
  /* 简单的方法将元素叠加在一起，并根据最高者的高度确定它们的大小。 */
  display: grid;
}
.grow-wrap::after {
  /* 注意奇怪的空间！需要预防跳动行为 */
  content: attr(>) " ";

  /* 这就是textarea文本的表现形式 */
  white-space: pre-wrap;

  /* 隐藏在视图，点击和屏幕阅读器中 */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* 您可以保留此设置，但是在用户调整大小后，它将破坏自动调整大小 */
  resize: none;

  /* Firefox显示增长的滚动条，您可以像这样隐藏。 */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* 需要相同的样式！ */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;

  /* 放在彼此之上 */
  grid-area: 1 / 1 / 2 / 2;
}

body {
  margin: 2rem;
  font: 1rem/1.4 system-ui, sans-serif;
}

label {
  display: block;
}

content: attr(>) " ";