min-height 在 Flex 子项上失效的根本原因是 flex-shrink: 1 默认启用收缩，优先级高于 min-height；设 flex-shrink: 0 可禁用收缩，使 min-height 生效，兼容 IE10+，且不影响其他 Flex 行为。
min-height 在 Flex 子项上不生效，根本不是属性写错了，而是被 flex-shrink: 1 默认压缩掉了 —— 直接设 flex-shrink: 0 是最准、最轻量的修复方式。
为什么 min-height 在 Flex 子项里经常“失效”
浏览器对 Flex 项目的默认行为是：flex-shrink: 1 + flex-basis: auto。这意味着：只要子项总尺寸超出容器可用空间，它们就会主动收缩（哪怕你写了 min-height: 200px），优先保证不溢出。这个“收缩权”比 min-height 级别更高，所以视觉上就像 min-height 被忽略。
- 常见于聊天气泡、卡片列表、表单行等需要保底高度的场景
- 在 IE11 中尤其严重 —— 它甚至不把
min-height当约束，只当建议值 - Safari 对嵌套 Flex 的
min-height计算也更保守，常需配合min-height: 0在父级重置
flex-shrink: 0 是怎么起作用的
它不是“让元素变高”，而是告诉布局引擎：“此项目禁止参与任何收缩分配”。一旦设了 flex-shrink: 0，浏览器就跳过它去计算剩余空间，min-height 才真正有机会生效。
- 兼容性好：
flex-shrink: 0在 IE10+ 可用（IE 需加-ms-flex-negative: 0） - 不影响其他行为：
flex-grow、order、排列方向全部照常工作 - 不破坏流式逻辑：只禁收缩，不锁死宽度或阻止换行（如需换行，仍要配
min-width: 0） - 别写
flex-shrink: -1—— 浏览器直接无视，回退到1
哪些地方必须加 flex-shrink: 0
不是所有 Flex 子项都需要，只针对那些「尺寸不能妥协」的原子元素：
- 带图标的按钮（图标缩成一个点就不可点了）
-
<img>元素（尤其没设height: auto时，flex-shrink: 0比width: 100%更可靠） - 开关控件、徽标、短标签（如 “VIP”、“已读”，压扁后信息丢失）
- 搜索框里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0） - 固定比例占位图（如 16:9 封面图，宽高比失守就废了）
容易踩的坑和绕不开的搭配
单独写 flex-shrink: 0 有时还不够，得看上下文：
- 如果子项同时写了
width或flex-basis，且值过大（比如flex-basis: 100%），它会先按那个尺寸占空间，flex-shrink: 0只防压缩，不防溢出 —— 此时考虑改用flex: 0 0 auto - 对含长文本的子项，
flex-shrink: 0不自动触发折行；需额外加min-width: 0（否则默认min-width: auto锁死最小宽度） - 在 IE11 中，若父容器是 column 方向 Flex，还得补
-ms-flex-negative: 0，光写flex-shrink: 0不生效 - 别全局写
* { flex-shrink: 0 }—— 这会让整个 Flex 布局失去弹性，文字块、导航栏全卡死
真正难的不是加这一行声明，而是判断「谁该守尺寸、谁该让空间」——多一层嵌套，就多一次收缩决策；没加 flex-shrink: 0 的图片，在小屏下可能突然塌成一条线，而你还在查 min-height 有没有拼错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
