flex布局时，超出宽度显示省略号场景使用flex左右布局，左边固定宽度; 右边内容自适应，超出父元素宽度的话显示省略

场景

使用flex左右布局，左边固定宽度; 右边内容自适应，超出父元素宽度的话显示省略号

——————————————————————
|      |             |
| left | right       |
|      |             |
——————————————————————

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .flex-wrap {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: #089e8a;
  }
  .left {
    flex: 0 0 60px;
    background-color: #f7f1ee;
  }
  .right {
    flex: 1;
    width: 0;
  }
  .right-son {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
</head>
<body>
  <div class="flex-wrap">
    <div class="left"></div>
    <div class="right">
      <div class="right-son">
        我们在前面说过，固有对象是由标准规定，随着 JavaScript 运行时创建而自动创建的对象实例。固有对象在任何 JavaScript 代码执行前就已经被创建出来了，它们通常扮演者类似基础库的角色。我们前面提到的“类”其实就是固有对象的一种。
      </div>
    </div>
  </div>
</body>
</html>

flex-grow

作用: 弹性项分配剩余空间的比例
例如: 三个弹性项的flex-grow设置为1，则如果有剩余空间的话，剩余空间会等比例分配给这三个弹性项
默认值为0，表示不会分配剩余空间

flex-shrink

作用: 不足空间的情况下，弹性项的收缩比例
默认值为1，表示每个弹性项会收缩一样的比例

flex-basis

作用: 弹性元素在主轴方向上的初始大小
默认值为 auto，表示参照我的width和height属性

flex: 1
即为
flex-grow: 1
flex-shrink: 1
flex-basis: 0