flex伸缩失效主因是min-width/auto等隐式限制及内容固有尺寸干扰，需设min-width:0、明确父容器高度、慎用flex:1并针对性处理图片文字等特殊内容。
flex-grow、flex-shrink、flex-basis 组合使用时看似简单，但实际常因默认行为和隐含约束导致“伸缩不生效”。核心不是属性没写对，而是浏览器在 flex 项上施加了隐形限制——尤其 min-width: auto 和 min-height: auto 这两个默认值，会强行卡住拉伸或收缩的下限。
确认 flex 项是否被内容“撑死”
当子元素内部有长文本、图片或固定尺寸块级元素时，它的固有尺寸（intrinsic size）可能已超过父容器分配的空间。此时即使写了 flex: 1，flex-grow 也无剩余空间可分，flex-shrink 又因 min-width: auto 无法缩小到内容以下——结果就是“看起来完全不伸缩”。
- 检查子元素 computed 样式中的
min-width或min-height，大概率是auto - 临时给该子元素加
min-width: 0（水平布局）或min-height: 0（垂直布局），立刻验证是否恢复伸缩 - 若有效，说明问题根源就是这个隐含最小尺寸限制
别只靠 flex: 1，要理解它背后的三元组
flex: 1 是简写，等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。其中 flex-basis: 0% 很关键：它让元素初始“不占内容空间”，全靠 flex-grow 分配。但如果父容器没设明确高度（比如 height: auto），或子元素自己写了 height、min-height，这个“0% 基准”就失效了。
- 想让单个子项占满剩余高度？用
flex: 1+ 确保父容器有明确高度（如min-height: 100vh） - 多个子项需等高？全部设
flex: 1，无需额外设置align-items: stretch - 想保留内容原始宽度、只允许 grow 不 shrink？写成
flex: 1 0 auto（即flex-grow: 1; flex-shrink: 0; flex-basis: auto）
图片、文字、嵌套容器这些“特殊内容”要单独处理
img 默认是替换元素，有固有宽高；长段落文字默认不换行；子容器若未继承高度，也会中断 flex 拉伸链。它们都会干扰 flex-grow/shrink 的计算逻辑。
立即学习“前端免费学习笔记（深入）”；
- 图片被拉伸变形？加
flex-shrink: 0或外层包 div +height: 100% - 文字溢出撑宽容器？加
word-break: break-word和overflow-wrap: break-word - 嵌套 flex 容器高度丢失？确保每一层父级都设了
height或flex: 1，且未被min-height: auto卡住
当 overflow: auto 出现时，优先考虑 Grid 替代
Flexbox 是一维布局模型，在父容器设置了 overflow: auto 且子项需同步拉伸高度时，浏览器对“可用空间”的判定容易混乱——子项可能只拉伸到可视区高度，而非滚动总高度。
- 典型场景：侧边栏 + 主内容区，主内容超长需滚动，但侧边栏高度不匹配
- Flex 下很难稳定解决，建议改用
display: grid配合grid-template-rows: 1fr或minmax(0, 1fr) - Grid 天然支持二维空间分配，对溢出和拉伸的兼容性更鲁棒
