在进行flex布局的时候，会经常遇到flex-grow无效这个问题
深入了解了一下，容器内item的flex-grow属性是按照父元素剩余空间来分配的。
flex-grow重点说明落在剩余这两个字上，父元素剩余的空间，那什么算父元素剩余空间呢,简单的理解就是(父元素的宽度-子元素总和的宽度),这里有两种情况:
1、子元素没有设置高度：
那么整个父元素的width就是剩余宽度，这个时候可以正常使用flex-grow.
2、子元素设置了宽度：
.a div{ width: 0; }
给每一个div设置一个width:0;然后进行分配flex-grow,这个时候加上去的宽度就是实实在在的width.
示例代码入下：
<div class="a"> <div class="b p">B</div> <div class="c p">C</div> <div class="d p">D</div> </div>
a { display: flex; background-color: wheat; } .b { flex-grow: 2; } .c { flex-grow: 1; } .d { flex-grow: 4; }
原文：https://www.cnblogs.com/psxiao/p/12313690.html