父元素flex:1,子元素宽度100%失效的问题

今天做项目时遇见一个问题，父元素在设置flex: 1来固定宽度撑满时，子元素设置width: 100%无效。经过尝试发现给父元素及设置flex: 1的元素加上width: 0可解决。即这样写：

.parent{
  flex:1;
  width: 0;
  .children{
    width: 100%;
    overflow-x:scroll ;
  }
}

但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可：

.parent{
  flex:1;
  width: 0;
  .children{
    width: 100%;
    overflow-x:scroll ;
    display: -webkit-box;
  }
}