如何让Textarea容器随文本框拖拽调整宽度同步扩展？

问题出在.container的宽度设置上，默认的max-width:600px加上block元素的特性，导致容器无法随子元素的宽度变化而扩展。以下是具体修改方案：

核心修改点 #

• 调整容器宽度规则：将.container的max-width改为min-width，同时设置width: fit-content，让容器默认保持最小600px宽度，且能随内容自动撑开。
• 统一盒模型计算：全局设置box-sizing: border-box，避免padding、border导致的宽度溢出问题。
• 让Textarea默认占满容器：给textarea设置width:100%，确保拖拽宽度变化能传递给外层容器。

修改后的完整代码 #

CSS #

* {
  box-sizing: border-box;
}

.container {
  min-width: 600px; /* 保留默认最小宽度 */
  width: fit-content; /* 宽度随内容自适应 */
  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 {
  width: 100%;
}

#description {
  width: 100%;
  min-height: 100px;
  resize: both;
}

HTML #

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

原理说明 #

• width: fit-content让容器的宽度由内部内容决定，替代了block元素默认的“占满父容器宽度”行为。
• min-width:600px保证在textarea未拖拽时，容器保持你需要的默认宽度。
• 全局box-sizing:border-box确保所有元素的宽度计算包含padding和border，不会出现内容溢出容器的情况。

内容的提问来源于stack exchange，提问作者flomueller