必须加min-width: 0才能解锁flex-shrink，因flex子项默认min-width: auto强制不小于内容宽度，导致flex-shrink无法生效；需配合flex: 1 1 0、overflow: hidden、white-space: nowrap及text-overflow: ellipsis等条件闭环。

为什么 flex 子项宽度会撑破父容器

不是 flex-shrink 失效，而是它根本没机会生效——浏览器默认给每个 flex 项目设了 min-width: auto，强制它不能比内容更窄。一个长 URL、连续无空格文本或未约束的 <img>，都会卡住收缩逻辑，哪怕你写了 flex: 1 或 flex-shrink: 1。

必须加 min-width: 0 才能解锁收缩

这是最常漏掉、也最关键的一步。只有显式覆盖默认值，flex-shrink 才真正参与计算：

• flex-direction: row 时，子项加 min-width: 0
• flex-direction: column 时，对应加 min-height: 0
• 若同时用了 flex: 1，建议改用 flex: 1 1 0（flex-basis: 0 更彻底压制内容初始宽度）
• <img> 或 <iframe></iframe> 还需额外加 max-width: 100% 和 height: auto，否则固有尺寸仍会溢出

text-overflow: ellipsis 在 Flex 里为啥不生效

省略号需要三件套同时成立，缺一不可：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 子项必须有明确宽度分配（靠 flex: 1 或父容器约束）
• white-space: nowrap
• overflow: hidden
• 仍然要加 min-width: 0——否则 white-space: nowrap 直接把内容横向撑开，裁剪区域压根没建立

常见错误是只在父容器加 overflow: hidden，但实际溢出发生在子项内部，得加在子项上。

IE11 下的特殊坑点

IE11 对 Flex 的交叉轴拉伸（align-items: stretch）触发条件更苛刻：

• 父容器必须有明确的交叉轴尺寸，比如 height: 100vh 或 min-height: 200px；min-height: 100% 基本无效
• 子项不能有任何 height 或 max-height，否则拉伸失效；应改用 min-height + flex-shrink: 0
• 表单控件如 <input> 默认带 height，需重置：input { height: auto; min-height: 1.2em; }
• 文字省略在 Flex 子项中大概率失败，得在外层包一层 <div>，再在内层设 <code>width: 100% + white-space: nowrap + overflow: hidden

  所有这些操作都依赖 min-width: 0 这个前提——它不是锦上添花，而是整个链条的起点。漏掉它，其他设置基本白搭。