textarea宽度溢出的直接原因是浏览器与小程序对默认盒模型解析不一致，必须为textarea自身显式设置box-sizing: border-box，并清除原生padding。
textarea width: 100% 溢出的直接原因
不是你写错了，是浏览器和小程序原生层对 textarea 的默认盒模型解析不一致。它默认用的是 content-box，且自带不可见的左右内边距（尤其在 iOS/安卓真机上），width: 100% 只算内容区，加上 padding 和 border 就必然超宽。开发者工具里不明显，是因为它用的是 Chrome 内核模拟，padding 常被忽略或设为 0。
必须显式设置 box-sizing: border-box
这是最核心、不可跳过的一步。只给父容器设 box-sizing 没用，textarea 自身必须声明：
-
textarea元素必须单独加box-sizing: border-box - 如果用了 CSS 框架（如 Bootstrap、WeUI），检查是否被重置了
box-sizing—— 打开开发者工具看 computed 样式里的box-sizing值是否真的是border-box - 全局重置虽省事：
* { box-sizing: border-box; }，但要补全伪元素：*::before, *::after { box-sizing: border-box; }
移动端真机上还要防“隐形 padding”
微信小程序和部分安卓 WebView 会额外注入左右内边距（约 8–12rpx），即使你写了 padding: 0，也可能被覆盖。解决方案是双重压制：
- 显式写死
padding-left: 0; padding-right: 0; - 用
text-indent: -999px或direction: rtl等 hack 并不推荐，容易引发光标错位；稳妥做法是加padding: 0 !important（仅限小程序或强兼容场景） - 若仍溢出几像素，可微调：
width: calc(100% - 2px)，但这是兜底，不是首选
flex 容器里 textarea 高度错乱连带宽度异常
在 display: flex 的父容器中，textarea 默认是 inline-level，width: 100% 失效，还会因高度计算不准导致横向溢出更严重：
立即学习“前端免费学习笔记（深入）”；
- 必须加
display: block，让它脱离行内上下文 - 配合
width: 100%+height: 100%+box-sizing: border-box - 若父容器有
padding，别忘了子元素的width: 100%是相对于父内容区，不是整个父盒
最易被忽略的一点：问题常只在真机暴露，而开发者工具“看起来正常”会让人误判修复完成。每次改完，务必用 iOS 和主流安卓机型实测横向滚动条是否消失——那几像素的溢出，往往就是 box-sizing 没落到 textarea 自身上，或者 padding 被原生层悄悄加回来了。
