如何确保 Textarea 字段的高度和宽度都增长？

Question

我是网络开发的初学者，我正在开发一个网站，并且有一个 Textarea 字段，我想用它来允许用户编写更长的文本。我应用了 CSS 样式，使字段的高度随着用户输入更多文本而增加，效果非常好。 但是，当用户将文本区域拖动到右侧时，我无法确保容器的宽度也增加。容纳 Textarea 字段的容器不会自动调整其宽度以容纳文本，并且 Textarea 字段会溢出到容器之外。 [看图]

.container {
  max-width: 600px;
  margin: 300px auto 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container>* {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.postForm {
  box-sizing: border-box;
}

<div class="container">
  <div class="postForm">
    <form>
      <textarea id="description" name="description" placeholder="Tell us about your post..."></textarea>
    </form>
  </div>
</div>

如何确保在调整 Textarea 字段大小时容器的宽度也随之增长？

我想到了 box-sizing: border-box;它会起作用，但不幸的是它不起作用。我应该改变什么？

Answer 1

我会向您提交给 textarea 元素添加 max-width 。这样，文本区域的大小确实会调整到超过父容器的大小，但如果您希望用户调整大小，则可以在文本区域的父容器上放置溢出以适应长度。我对现有代码进行了修改以显示这两种情况。

.container {
  max-width: 600px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container>* {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

textarea{
 max-width:100%;
}

.overflow { overflow:scroll }

<div class="container">
  <div class="postForm">
    <form>
      <textarea id="description" name="description" placeholder="Tell us about your post..."></textarea>
    </form>
  </div>
</div>

<div class="overflow">
  <textarea id="description" name="description" placeholder="Tell us about your post..."></textarea>
</div>