textarea在Flex容器中拖拽拉伸会撑开父容器，应设resize: none禁用拖拽；若需垂直拉伸则用resize: vertical并配合max-height和overflow: hidden，且必须作用于textarea自身。
textarea在Flex容器中拖拽拉伸后撑开父容器？先关掉原生resize
默认情况下，textarea 的 resize 属性是 both，用户可自由拖拽右下角改变宽高——但在 Flex 布局里，这种手动拉伸会直接破坏 flex: 1 或 width: 100% 的约束，导致它突破父容器边界，甚至触发横向滚动条。
最直接有效的做法是显式禁用拖拽：resize: none。这不是“隐藏问题”，而是切断干扰源。尤其在移动端或表单卡片类布局中，用户本就不该手动调整文本域尺寸，交由 CSS 控制更可靠。
-
resize: none必须加在textarea元素自身上，父容器设无效 - 若需保留垂直方向拉伸（如 auto-height 场景），可用
resize: vertical，但要同步确保父容器有明确max-height和overflow: hidden - 某些旧版 Safari 对
resize支持不稳定，建议搭配min-width: 0和max-width: 100%双保险
为什么加了width:100%还是溢出？查box-sizing和原生内边距
小程序和部分 WebView 环境中，textarea 是原生组件，其默认 box-sizing 是 content-box，且自带不可被 CSS 完全覆盖的 padding（尤其是 iOS 微信基础库 width: 100%; box-sizing: border-box;，实际渲染宽度 = 内容区 + 原生 padding + border，仍会溢出。
修复必须分两步走：重置盒模型 + 削减可用空间。
立即学习“前端免费学习笔记（深入）”；
- 强制重置：
box-sizing: border-box; padding: 0; border: 0;（注意：小程序中padding可能部分失效，需配合disable-default-padding属性） - 给容器加
max-width: 100%，并确保父级没有flex-shrink: 0或隐式min-width: auto锁死收缩 - 小程序真机调试时，直接在 WXML 中为
textarea加属性：disable-default-padding="true"，比纯 CSS 更彻底
Flex子项里的textarea为何不随flex:1收缩？缺min-height: 0
当 textarea 是 flex-direction: column 容器的直接子项时，浏览器会给它默认 min-height: min-content。哪怕你写了 flex: 1，它也会卡在“最少能显示几行文字”的高度，拒绝压缩——结果就是上方区域收缩了，下方却留白巨大，或者拖拽分隔线时底部面板无法展开。
这个问题和文字截断里 min-width: 0 的逻辑一脉相承，只是方向换成了垂直轴。
- 必须给
textarea的直接父 flex 项（不是textarea自身）加min-height: 0 - 如果父项还嵌套了其他 flex 容器（比如带标题栏的卡片），那每一层参与伸缩的 flex 项都得单独设
min-height: 0 - 不要只依赖
height: 100%或flex-basis: 0—— 它们无法覆盖min-height: min-content这个默认锁
拖拽拉伸后内容错位、placeholder偏移？光标渲染层不一致
原生 textarea 在部分安卓机型或微信基础库版本中，光标和 placeholder 渲染层与 WebView 不同步。拖拽拉伸后，CSS 计算的宽度变了，但原生层未及时重绘，导致 placeholder 文字靠左顶格、光标定位偏移几个像素，甚至出现双光标。
这不是样式没写对，而是渲染管线脱节。目前最稳的应对方式是绕过原生层干预：
- 用
transform: translateZ(0)强制触发硬件加速，提升重绘响应速度 - 避免在
textarea上同时使用text-align: right或direction: rtl，它们会加剧原生层计算偏差 - 若必须动态控制尺寸，优先用 JS 修改
style.width/style.height，而非依赖 flex 自动分配（尤其在键盘弹起后 resize 场景）
真正难的不是加哪一行 CSS，而是每次看到错位，都要确认三件事：当前环境是否原生组件、min-height 是否被锁死、以及 resize 行为是否已被完全接管——漏掉任一环，视觉异常就会复现。
