Flex布局均分失效？min-width:0是关键

元素的最小尺寸限制对 flex: 1 均分效果的影响。

简单来说，即使设置了 flex: 1，Flex 子元素在空间不足时也可能无法完全均分，因为浏览器会默认给子元素设置一个「最小宽度保护」，这个保护机制会阻止元素被压缩到小于其内容所需的最小宽度（即 min-width: auto 的默认行为）。

具体原因解析：

1. min-width: auto 的默认行为
   Flex 子元素的默认 min-width 是 auto（而不是 0），这意味着：

   • 元素宽度不能小于其内容的「最小必要宽度」（类似 min-content 的效果）。
   • 例如，一个包含长文本的元素，即使设置了 flex: 1，也不会被压缩到文字无法完整显示的程度。

2. 空间不足时的分配问题
   当父容器空间不够分配时：

   • 内容较少的元素会先被压缩到其最小宽度（内容刚好能显示）。
   • 剩下的空间会优先分配给内容较多的元素，导致子元素宽度不均（后面的元素可能更宽）。

3. 为什么 min-width: 0 能解决问题？
   显式设置 min-width: 0 会：

   • 取消浏览器的「最小宽度保护」。
   • 允许元素被压缩到 0 宽度（理论上），此时 flex: 1 才能真正生效 —— 所有子元素会严格按照比例均分可用空间，无论内容多少。

   • /* 父容器 */
     .parent {
       display: flex;
       width: 300px; /* 空间有限 */
     }
     
     /* 子元素 - 仅用 flex: 1 可能不均分 */
     .child {
       flex: 1;
       /* 未设置 min-width 时，默认是 auto */
     }
     
     /* 子元素 - 真正实现均分的写法 */
     .child-fix {
       flex: 1;
       min-width: 0; /* 关键：取消最小宽度限制 */
     }

• 当子元素内容长度不同时，child 会因为 min-width: auto 导致宽度不均。
• 而 child-fix 因为设置了 min-width: 0，会严格按照 flex: 1 均分父容器宽度，即使内容被截断。

总结：

要让 Flex 子元素在任何情况下都严格均分宽度，需要同时设置：

.child {
  flex: 1;          /* 均分剩余空间 */
  min-width: 0;     /* 允许元素被压缩到 0 宽度，突破内容限制 */
}

这就是为什么在实际项目中，仅用 flex: 1 有时无法实现完美均分 —— 需要配合 min-width: 0 来处理空间不足的边缘情况。