应设置flex-shrink: 0或flex: 0 0 ，并配合min-width兜底；flex-basis才是主轴基准尺寸，width在flex中约束力弱，两者叠加最稳妥。
flex子项被压缩到0宽怎么办
Flex容器默认会让子元素收缩（shrink），即使设置了width或min-width，也可能被压成一条线甚至消失。根本原因是flex-shrink: 1在起作用，且min-width本身不阻止收缩行为——它只在布局“有空间可分配”时生效，而压缩阶段它还没机会介入。
解决路径很直接：关掉收缩，或用更可靠的 flex 属性替代纯 width 控制。
- 给子元素显式设置
flex-shrink: 0，禁用压缩 - 改用
flex: 0 0 <min-width></min-width>（即flex-grow: 0、flex-shrink: 0、flex-basis: <min-width></min-width>） - 避免只写
width: 200px，它在 flex 中是弱约束；flex-basis才是 flex 布局的“基准尺寸”
flex-basis 和 min-width 同时用是否多余
不多余，但分工不同：flex-basis决定初始主轴尺寸（相当于“理想宽度”），min-width是最终兜底限制（防止内容撑开或外部干扰导致异常缩小）。两者叠加最稳妥。
常见错误是只设min-width却没控住flex-shrink，结果子项仍被压扁；或者只设flex: 0 0 200px，但内部文字超长又没换行，造成溢出。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
flex: 0 0 200px; min-width: 200px; - 若内容可能变长，加
white-space: nowrap; overflow: hidden;防文字撑破 - 注意：
flex-basis: auto会读取width值，但flex-basis: 0就完全忽略width，务必确认你设的是具体值
响应式场景下最小宽度怎么动态控制
不能只靠媒体查询反复覆盖flex-basis，容易和父容器的flex-wrap逻辑冲突。更可靠的方式是用min-width配合flex: 1做弹性伸缩边界。
例如三列等分布局，要求每列至少240px，超出则均分剩余空间：
.item {
flex: 1 1 240px;
min-width: 240px;
}
这里flex-grow: 1允许拉伸，flex-basis: 240px设基准，min-width双重保险。当容器总宽＜720px 时，浏览器会触发换行（如果父容器设了flex-wrap: wrap）而非强行压缩。
- 慎用
flex: 1简写——它等价于flex: 1 1 0%，flex-basis: 0%会导致子项按比例瓜分空间，忽略min-width - 移动端建议优先用
flex: 0 0 max-content配合min-width，让子项优先适应内容宽度
表格类布局中 flex 最小宽度失效的典型原因
当 flex 容器设了width: 100%但父级没有明确宽度（比如在position: absolute或display: contents上下文中），子项的min-width和flex-basis都会因“无参考宽度”而退化为auto，表现像没设一样。
这不是 flex 的 bug，而是 CSS 尺寸计算规则：min-width在无可用主轴尺寸时无法生效。
- 检查父容器是否具有确定宽度（如
width、max-width，或受grid/table约束） - 临时加
border或outline观察容器是否真的占满预期区域 - 极端情况可强制触发 BFC：
overflow: hidden或display: flow-root，让父容器正确参与尺寸计算
flex-shrink的默认值和flex-basis的隐式行为——很多人以为写了width就等于设了 flex 基准，其实不是。 
