Flex弹性布局给子组件设置flex-grow权重属性不生效问题

.parent {
  display: flex;
  flex-direction: row;
  width: 100%;
  .child1 {
    flex-grow: 1;
  }
  .child2 {
    flex-grow: 1;
  }
  .child3 {
    flex-grow: 1;
  }
}

问题：

如上scss样式给所有子组件设置flex-grow平分父组件宽度，发现当子组件中内容变化时子组件所占宽度不再是平分宽度；

解决如下：

需给每个子组件设置下宽度：width: 0;即可！！！

.parent {
  display: flex;
  flex-direction: row;
  width: 100%;
  .child1 {
    width: 0;
    flex-grow: 1;
  }
  .child2 {
    width: 0;
    flex-grow: 1;
  }
  .child3 {
    width: 0;
    flex-grow: 1;
  }
}