textarea能拖拽与box-sizing无关，必须设置resize:none才能禁用；需单独声明textarea{box-sizing:border-box}以确保兼容性，并配合min-height、max-height和width:100%实现稳定自适应。
textarea 设置 box-sizing: border-box 后仍能拖拽？不是 box-sizing 的问题
box-sizing 只影响尺寸计算逻辑，和是否允许拖拽完全无关。用户能拉伸 textarea 是浏览器默认行为，由 resize 属性控制。即使你写了 box-sizing: border-box，只要没禁用 resize，右下角拖拽手柄依然存在、依然生效。
必须显式设置 resize: none 才能禁拖拽
这是最直接、最可靠的方案。不依赖任何 JS，纯 CSS 控制：
-
resize: none彻底移除拖拽手柄，用户无法拉伸 - 若只允许垂直拉伸，用
resize: vertical；水平同理，但极少用 - 搭配
min-height和max-height（设为相同值）可锁死高度，避免视觉“还能动”的错觉 - 注意：某些 UI 框架（如 Bootstrap 模态框）里，
resize: none生效了，但父容器有overflow: auto，滚动条动起来会让人误以为是textarea在拉伸——此时要给父容器加overflow: visible或overflow: unset
为什么只写 width: 100% + box-sizing: border-box 不够？
因为 textarea 默认是 content-box，且不继承通配符重置。即使你写了 * { box-sizing: border-box }，textarea 在 Safari、旧 Chrome、多数安卓 WebView 中仍按 content-box 解析。结果就是：width: 100% + padding + border 超出父容器宽度。
- 必须单独声明：
textarea { box-sizing: border-box; width: 100%; max-width: 600px; } - 别漏掉
max-width，否则大屏上过宽影响阅读体验 - 避免同时设
rows和height，二者冲突时渲染行为不一致，尤其在 Safari 中容易导致高度塌陷或溢出
容易被忽略的兼容性细节
真正踩坑的地方往往不在主逻辑，而在边缘场景：
-
resize是 CSS3 属性，IE 完全不支持，但 IE 已淘汰；需关注的是 iOS Safari 旧版本对resize: vertical的支持不稳定 - 第三方组件库（如 Vant 的
.van-field__control）可能用更具体选择器覆盖你的resize或box-sizing规则，得加!important或提高选择器权重 - Flex 容器中设了
flex: 1的textarea，如果没加flex-shrink: 0，可能被压缩变形，看起来像“失控”，其实只是弹性收缩在起作用
box-sizing 和 resize 是两条独立的控制线，一个管“怎么算宽高”，一个管“能不能拉”，混在一起想就容易绕进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
