Flex布局:flex-grow:1失效

工作中遇到一些flex-grow:1的容器失效,一堆文字乱码溢出,最后看了一下flex布局的原理解决了

1#div{
2  flex-grow:1;
3  wisth: 0;
4}

如果遇到另一边的div设了宽但是被flex-grow:1的内容挤压了,可以给设了宽的div加 flex-shrink: 0; 这个属性,就能解决了

1.item-right{
2  width: 100px;height: 100px;
3  flex-shrink: 0;
4}