求助：发布帖的textarea无法适配父容器，如何解决该布局问题？

嘿，我刚梳理了你的代码，这个textarea向右溢出的问题其实是几个小细节没处理到位，咱们一步步来修复：

问题根源 #

1. box-sizing 默认值的坑：textarea默认的box-sizing是content-box，这意味着你设置的width:100%只计算内容宽度，加上textarea自带的1px边框，就会超出父容器的宽度。
2. cols 属性的干扰：你给textarea加了cols=50，这个属性会强制给textarea一个基于字符数的固定宽度，和你设置的width:100%冲突，导致宽度计算混乱。
3. 重复样式的混淆：你的CSS里重复定义了textarea的样式（比如先写width:80%又写width:100%），虽然后面的规则会覆盖前面，但容易造成布局逻辑的混乱。

修复方案 #

直接调整以下几点即可解决问题：

• 给textarea添加box-sizing: border-box;，让宽度计算包含边框和内边距
• 移除textarea的cols属性，完全用CSS控制宽度
• 清理重复的CSS样式，确保规则清晰

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; height: 100%; width: 100%; }
.post { 
  display: flex; 
  background-color: lightgrey; 
  border-radius: 10px; 
  height: 300px; 
  padding: 5px 5% 5px 5%; 
  margin: 20px; 
  box-shadow: #888888 1px 1px 1px 1px; 
}
.background { 
  margin: 5px; 
  border: 1px solid; 
  padding: 10px;
  width: 100%; 
}
.input { 
  background-color: red; 
  padding: 5px; 
}
textarea { 
  resize: none; 
  width: 100%; 
  margin: 0; 
  height: 100px;
  box-sizing: border-box; /* 关键：让宽度包含边框和内边距 */
  border: 1px solid #ccc; /* 可选：统一边框样式 */
}
.buttons { 
  float: right; 
  padding-top: 5px; 
}
.title h3 { margin-top: 0; } /* 移除默认h3的margin，避免多余间距 */
</style>
</head>
<body>
<div class="post">
  <div class="background">
    <div class="title">
      <h3> Publish post </h3>
    </div>
    <div class="input">
      <form>
        <textarea class="message"></textarea>
      </form>
    </div>
    <div class="buttons">
      <input type="submit" value="Preview" />
      <input type="submit" value="Send" />
    </div>
  </div>
</div>
</body>
</html>

效果说明 #

• box-sizing: border-box确保textarea的100%宽度是包含边框和内边距的，不会超出父容器
• 移除cols属性后，width:100%能完全生效，跟随父容器宽度自适应
• 清理重复CSS规则后，布局逻辑更清晰，同时调整了h3的默认margin，让整体排版更整洁

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