解决flex布局内容超出盒子宽度问题

方案1：
子项目设置flex:1;overflow:hidden;
子项目内容 设置超出省略号，可以完整显示三个省略号
子项目内容宽度等于子项目

#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}
 
#main div:nth-of-type(1) {flex:1;overflow:hidden;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
.child{
      white-space: nowrap;
       overflow: hidden;
      text-overflow: ellipsis;
}

方案2:
子项目设置flex:1;width:0;，
子项目内容不设置，无法显示省略号，且子项目内容超出(比父容器大)

#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}
 
#main div:nth-of-type(1) {flex:1;width:0;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
.child{
      
}