css display:flex 弹性布局 子标签设置宽度无效的问题

表面原因:

一个父标签中嵌入了两个子标签，当父标签设置display:flex之后。即使子标签设置了宽度都是50%，但是如果左边子标签内容多，则左边子标签会挤掉右边子标签的一部分，所以导致了右边的宽度显示有问题。

根本原因：

父元素设置了display:flex,那么所有的子标签都会默认加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 属性,表示开启了元素的收缩功能，所以才会有左边子标签会挤掉右边子标签的一部分的问题。
因此其中一种做法是：我们可以让该标签的自动收缩关闭，即flex:0 0 auto;,然后再设置该标签的宽度即可。

解决办法(4种)

做法1:

flex: 0 0 auto;
width: 50%;

做法2:

flex: 0 0 50%;

做法3:

flex-shrink:0;
width: 50%;

做法4:

min-width:50%;