textarea撑破容器的根本原因是box-sizing: content-box与min-width: min-content双重限制叠加；必须同时设置box-sizing: border-box和min-width: 0才能解决。
直接加 width: 100% 或 flex: 1 几乎必然撑破——根本原因不是样式没写对，而是 textarea 的默认盒模型 + 默认最小宽度双重限制同时生效。
为什么 textarea 总是撑破容器？
两个独立但叠加的问题：一是浏览器默认用 box-sizing: content-box，padding 和 border 都额外加在 width 外；二是 textarea 作为替换元素，默认 min-width: min-content（不是 auto），哪怕 flex 容器给它 flex: 1，它也拒绝收缩到比内容更窄。
这两个机制互不干扰，但合起来就导致：你设了 width: 100%，它实际宽 = 100% + 左右 padding + 左右 border；再遇上一串无空格长文本（如 URL、token），它宁可撑开父容器也不折行。
必须同时设置的两个 CSS 规则
只改一个，问题照旧。必须成对出现：
-
box-sizing: border-box—— 让width: 100%真正包含padding和border -
min-width: 0—— 覆盖textarea的固有min-width: min-content，打开收缩能力
推荐写法：
textarea {
width: 100%;
box-sizing: border-box;
min-width: 0;
}
注意：min-width: 0 必须直接作用于 textarea 元素本身，套一层 div 再设无效。
Flex 布局中 textarea 还是撑破？检查这三点
即使加了上面两条，仍撑破，大概率是以下某条被忽略：
- 父容器用了
display: flex，但textarea的父级（比如.form-item）没设flex: 1或flex: auto，导致textarea拿不到可用空间 -
textarea上写了flex-shrink: 0（常见于某些 UI 库重置），它会直接无视min-width: 0 - 容器里还有其他 flex 项（如图标、按钮），它们占用了空间但没设
flex-shrink: 1，把textarea挤出去了
长文本换行失效？先确认 min-width: 0 是否生效
overflow-wrap: break-word 或 word-break: break-all 在 textarea 上基本无效——因为 textarea 是替换元素，其内部文本排版由浏览器私有逻辑控制，CSS 换行属性对它不起作用。
真正要解决长文本撑破，得换思路：
- 如果只是展示用途，用
pre或div[contenteditable]替代textarea，它们受标准 CSS 换行规则约束 - 如果是编辑场景且必须用
textarea，靠resize: none+max-width+min-width: 0锁死宽度，再引导用户手动换行或粘贴前处理数据 - 极端情况（如日志查看器），用 JS 截断 + tooltip 展示全量内容，比硬撑更可靠
容易被忽略的是：min-width: 0 是开关，不是解决方案——它只让后续规则有机会起效，但对 textarea 自身的换行行为没有影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
