根本原因是flex容器中min-height: min-content阻止textarea收缩，解法是给其父级div设min-height: 0或具体值。
不是 textarea 不能拖动，而是它“能拖动”，但拖完之后整个布局卡住、不响应、底部区域伸展不了——问题出在 Flex 容器对它的约束上，不是 textarea 本身失效。
flex-direction: column 中 min-height: min-content 是罪魁祸首
当 textarea 被放在 flex-direction: column 的容器里（比如编辑器三栏布局），它的父级 <div> 默认带有 min-height: min-content。这个值会让该 flex 项拒绝收缩到比其内容“最小固有高度”还小的程度——哪怕你 JS 设置了 height: calc(...) 或 CSS 写了 flex: 1，浏览器仍会拦住它往下压。
典型现象：向上拖分隔线，上方区域能缩；向下拖，下方 textarea 就像被钉住，死活撑不满剩余空间。
- 根本原因不是 JS 计算错，也不是
resize属性没生效 -
min-content高度由内部元素（如空<textarea>+.lang-label）决定，往往极小但不可忽略 - 这个默认行为在 Chrome/Firefox/Safari 均一致，不是 bug，是规范
resize: none 只禁拖拽，不解决 flex 卡死
加 resize: none 确实能让右下角拖拽把手消失，但如果你的布局还依赖 flex 动态分配空间（比如拖动分隔线调整两个 textarea 高度），那只是掩耳盗铃：视觉上不能拉了，逻辑上依然被 min-height: min-content 锁死。
立即学习“前端免费学习笔记（深入）”；
-
resize: none生效前提是overflow不是visible（textarea默认overflow: auto，OK） - 如果父容器（如
.modal-body）设了overflow: auto，可能掩盖真实问题：你以为是textarea在动，其实是父容器滚动条在动 - 同时设
rows和height会冲突，不同浏览器渲染不一致，建议只用 CSSheight+max-height
真正起效的解法只有两个
必须显式覆盖 flex 项的隐式最小高度限制，否则所有 JS 高度计算、flex 比例分配都白搭。
- 最简方案：
min-height: 0—— 加在可调整大小的面板容器上（如aside > div），不是加在textarea自身上 - 更可控方案：设精确最小值，例如
min-height: 60px，适合已知内容最少占几行的场景 - 别碰
height: auto：对textarea设这个无效，它仍是替换元素，不会随内容自适应 - 若需内容驱动高度，请用 JS 的
scrollHeight三步法：el.style.height = 'auto'; const h = el.scrollHeight; el.style.height = h + 'px'
最容易被忽略的是：min-height: 0 必须加在 flex 项（即包裹 textarea 的那个 <div>）上，而不是 textarea 本身；加错位置等于没加。
