一、总结

1.1 问题原因

flex 下的子元素， min-width 属性会被设为 auto

这代表元素最小宽度与内容保持一致，当文本出现时，就被撑大了，不会让文本折行

因为文本折行的条件是父元素宽度比文本宽度小，这就矛盾了

1.2 解决方法

通过给flex下的子元素手动设置 min-width: 0; 来打破这一行为，也就解决了问题

min-width: 0;

其实不管多少层的flex嵌套，理解了原理，按照规则处理，就不会出错。下面一步步介绍flex使用的注意事项，复现并解决问题

二、`flex`常规用法（复现问题、理解`min-width: auto`）

2.1 复现问题

以本文开头示例为例，使用flex时，通常为左右两列的情况：右侧宽度不变，左侧自动占满剩余宽度

简单看一下示例的dom结构：

# 左侧文本单独由一div包裹，右侧同样有一按钮

<div className={PREFIX}>
    <div className={`${PREFIX}-left`}>
        <div className={`${PREFIX}-leftText`}>
          真是一段很长的文本真是一段很长的文本真是一段很长的文本
        </div>
    </div>
    <div className={`${PREFIX}-right`}>
        <div className={`${PREFIX}-rightBtn`}>按钮</div>
    </div>
</div>

此时，为实现右侧宽度固定（不自动填充空余区域），且不被左侧压缩，right样式应为：

flex: 0 0 auto;

即
flex-grow: 0;  // 元素不延伸
flex-shrink: 0;  // 元素不被压缩
flex-basic: auto;  // 元素的基础宽度为内容宽度

左侧元素使用剩余区域，则按照常理left样式为：

flex: 1 1 0;

即
flex: 1;

亦即
flex-grow: 1;  // 元素延展剩余区域
flex-shrink: 1;  // 元素被压缩
flex-basic: 0;  // 元素基础宽度0

效果：
让元素自动占满剩余区域

当然也要设置左侧文本省略：

# 注意：本例中，左侧文本是被又一个<div>包裹了的（之后会解释，为什么多一个div包裹文本，就不会自动省略了）

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

**但是！**这样常规设置后，实际就是有问题的效果：

左侧元素宽度，明显撑大了，甚至超出父元素的100%

2.2 问题原因

与1.1 问题原因内容相同，再按文章顺序叙述一遍

因为 flex 下的子元素， min-width 属性会被设为 auto

这代表元素最小宽度与内容保持一致，当文本出现时，就被撑大了，不会让文本折行

因为文本折行的条件是父元素宽度比文本宽度小，这就矛盾了

2.3 解决问题

通过给flex下的子元素手动设置 min-width: 0; 来打破这一行为

给左侧元素left样式加上min-width: 0;：

flex: 1;
min-width: 0;

问题解决，现在左元素的占位就是剩余区域，不会撑大超出100%，也不会将右侧元素挤到外部：

[问题解决] Flex布局中 文本不省略