解决用flex布局时内容可能溢出的问题

在开发过程中，使用flex布局的时候会遇到子元素的内容溢出的问题，后来找到了解决办法，跟大家分享下。

.father{ display: flex ;}

.son1{ flex: 1;}

第一种方法：

此时对.son1设置width: 100%无效，但是设置width: 0可行。即：

.son1{ flex: 1; width: 0}

如果不设置宽度，.son1可以被子节点无限撑开。

第二种方法：

增加 overflow: hidden。即：

.son1{ flex: 1;  overflow: hidden;}

上面的二种方法都可以达到我们需要的效果。