flex容器不设height时高度塌陷，主因是父容器被height/max-height/overflow限制；textarea需加flex:1和min-height:0才生效，否则因默认min-height:auto拒绝拉伸。
flex容器本身不设height，但父容器卡死了高度
Flex容器默认就是内容撑开高度的，height: auto 是它的初始值。你看到“文本框没撑开”，90% 是因为它的父级（比如 .form 或 body）写了 height: 100%、max-height: 400px，或者 overflow: hidden —— 这些都会把子项“压扁”。
检查路径：html → body → .container → .textarea-wrapper，逐层看 computed height 和 overflow 是否被限制。
- 删掉所有不必要的
height、max-height，改用min-height: 100vh（如果需要最小视口高度） - 如果父容器是 flex item，且希望它占满剩余空间，给它加
flex: 1，而不是设height: 100% - 避免在 flex 容器上写
overflow: hidden，滚动应交给内部具体区域（如.content）
文本框用 textarea 时，flex: 1 不生效
textarea 是替换元素，默认不参与 flex 拉伸，即使父容器是 display: flex，它也不会自动填满剩余高度。
解决办法只有两个：
- 把
textarea包进一个div，让这个div设flex: 1，再把textarea设为width: 100%; height: 100%（此时height: 100%才有参照） - 直接对
textarea设置flex: 1+min-height: 0（关键！因为textarea默认min-height: auto，会阻止 flex 压缩/拉伸）
推荐写法：
.textarea-wrapper {
display: flex;
flex-direction: column;
min-height: 200px; /* 最小高度，不是固定高 */
}
textarea {
flex: 1;
min-height: 0; /* 必须加，否则 flex: 1 失效 */
resize: vertical; /* 允许手动拖拽 */
padding: 8px;
}
内容撑不开，但开发者工具显示 height 是 0
这通常不是 flex 的问题，而是内容本身脱离了文档流：
-
textarea外层用了position: absolute或float—— 删掉，改用margin或align-self - 里面塞了
img但没设max-width: 100%; height: auto，导致图片溢出后父容器塌陷 -
box-sizing是border-box，但 padding 太大 + height 写死，实际内容被裁剪 —— 查看 computed 的height和scrollHeight是否一致
快速验证：临时加 outline: 1px solid red 到 textarea 和它的父容器，看红色边框是否包裹住文字。
需要滚动但又不想出现双滚动条
常见错误是给整个 flex 容器设 overflow-y: auto，结果内容区和容器同时可滚，体验割裂。
正确做法是只让内容区域自己滚：
- 外层 flex 容器保持
overflow: visible（默认） - 把
textarea单独设overflow-y: auto（其实不需要，textarea自带滚动） - 如果
textarea里嵌了富文本编辑器（如contenteditablediv），那就给那个 div 设max-height: 300px; overflow-y: auto，并确保它的父容器有flex: 1
注意：Safari 对 textarea 的 flex: 1 支持略滞后，加 -webkit-flex: 1 可兜底，但 min-height: 0 才是核心。
真正容易被忽略的是 min-height: 0 —— 它不像 flex: 1 那样显眼，但缺了它，textarea 在 flex 容器里就永远“不肯长大”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
