resize: vertical 未生效主因是样式未作用于真实textarea元素，常见于UI库封装、高优先级规则覆盖或overflow缺失；需配overflow: auto、min/max-height及box-sizing: border-box才可控。
resize: vertical 为什么看起来没生效
写了 resize: vertical 却仍能水平拖拽，大概率不是写错了，而是样式根本没作用到真实 textarea 元素上。常见原因有三个：
• 第三方 UI 库（如 Bootstrap）把 textarea 包在一层 div 或 span 里，你写的 textarea { resize: vertical; } 根本不匹配那个被渲染的真实元素；
• Bootstrap 4+ 默认加了 textarea { resize: vertical !important; }，但它的 !important 是针对“只允许垂直”，而你可能误以为它禁用了所有拉伸——其实它只是锁定了方向；
• 开发者工具里查「Computed」面板，搜 resize，如果最终值是 both，说明你的规则被更高优先级样式覆盖了。
必须配 overflow 和尺寸约束才真正可控
resize: vertical 只控制拖拽方向，不控制高度上限。用户一拉到底，textarea 可能撑破模态框、遮挡按钮、甚至让父容器溢出滚动。要稳住，得三件套一起上：
• overflow: auto（必需，否则 resize 被浏览器忽略）；
• min-height 和 max-height（例如 min-height: 6em; max-height: 12em;），避免初始太矮或无限拉高；
• box-sizing: border-box（Bootstrap 5+ 的 .form-control 已自带，放心用）；
• 别同时设 rows 和 height，二者冲突时渲染行为不一致，尤其在 Safari 下容易宽度意外收缩。
在 Bootstrap 模态框里怎么让它乖乖垂直拉伸
Bootstrap 的 .modal-body 默认 overflow: auto，有时你会看到“还能拖”的假象——其实是父容器在滚动，不是 textarea 本身在变高。要确保拉伸只发生在 textarea 自身：
• 给 textarea 加 flex-shrink: 0，防止被弹性父容器压缩；
• 给 .modal-body 显式设 overflow-y: visible 或 overflow-y: unset，避免滚动行为被截断；
• 如果用了 .modal-dialog-scrollable 类，注意它默认只给 .modal-body 设了 max-height: 60vh，这个值在富文本场景下常不够，建议内联覆盖：<div class="modal-body" style="max-height: 75vh; overflow-y: auto;">；<br>• 移动端 Safari 建议补 <code>-webkit-overflow-scrolling: touch 防卡顿。
怎么精准作用于某几个 textarea，而不是全局一刀切
直接写 textarea { resize: vertical; } 是危险操作，会误伤日志面板、代码编辑器等需要二维调整的场景。
• 推荐用类名隔离：<textarea class="js-resize-vertical"></textarea>，再写 .js-resize-vertical { resize: vertical; overflow: auto; min-height: 6em; max-height: 12em; }；
• 如果必须用属性选择器，可用 textarea[aria-label="备注"] 这类带语义的定位；
• 内联最稳：<textarea style="resize: vertical; overflow: auto; max-height: 12em;"></textarea>，不用 !important 也能压过大多数框架样式；
• 注意：移动端建议用 em 或 rem 替代 px 控制 max-height，避免缩放后高度失衡。
overflow 或弹性布局悄悄劫持了行为——每次改完，务必打开开发者工具看「Computed」里的 resize 和 overflow 值。
