存在填充时如何使 textarea 100% 无溢出？

在使用 textarea 时，有时会遇到需要设定宽高，但同时也需要内容撑开 textarea 的情况。这时，如果不处理，当输入的内容超出设定的宽高时，就会导致溢出问题。

为了解决这个问题，我们可以通过以下的方法使 textarea 100% 无溢出。

方法一：使用 box-sizing

我们可以通过设置 textarea 的 box-sizing 属性为 border-box，将 textarea 的 padding 和 border 计算在内，从而撑开 textarea 的大小。

textarea {
  width:100%;
  height:100%;
  padding:10px;
  border:1px solid #ccc;
  box-sizing:border-box;
}

方法二：使用 flex 布局

我们还可以使用 flex 布局，将 textarea 放入一个 flex 容器中，使其能够根据容器的大小自适应。

.container {
  width:100%;
  height:100%;
  display:flex;
}

textarea {
  width:100%;
  height:100%;
  padding:10px;
  border:1px solid #ccc;
  flex:1;
}

方法三：使用 max-height

我们也可以使用 max-height 来限制 textarea 的最大高度，从而避免溢出问题。

textarea {
  width:100%;
  max-height:100%;
  padding:10px;
  border:1px solid #ccc;
  overflow-y:auto;
}

总结

通过使用以上方法，我们可以轻松解决 textarea 的溢出问题，从而实现让 textarea 100% 无溢出的效果。同时，我们也可以根据实际需求，选择适合的方法进行处理。