flex布局一行显示多个固定宽度的子元素，超出父盒子宽度的内容滚动条显示

实现效果：父盒子flex布局，子元素一行显示，且子元素宽度固定，超出父盒子部分的内容滚动条显示

关键就是给子元素加上：

// 给子元素加上如下两行代码，保障flex下子元素宽度不变
//flex-grow 属性用于设置或检索弹性盒子的扩展比率
//flex-shrink 属性指定了 flex 元素的收缩规则
 flex-grow: 0;
 flex-shrink: 0;

样式部分：

.father {
    display: flex;
    width: 100%;
    overflow: auto;
    .son {
      // 保障flex下元素宽度不变
      flex-grow: 0;
      flex-shrink: 0;
      height: 200px;
      width: 500px;
    }
}

html部分：

<div class="father">
      <div class="son" style="background: pink"></div>
      <div class="son" style="background: yellow"></div>
</div>