Flex-Grow无效问题

最近在用Flex布局，遇到flex-grow无效这个问题。
深入了解了下，容器内item的flex-grow属性是按照父元素剩余空间来分配的。

但究竟是怎么计算呢？
flex-grow重点说明落在 剩余 这两个字上,父元素剩余的空间,那什么算父元素剩余空间呢,简单的理解就是(父元素的宽度-子元素总和的宽度),这里有两种情况:
1、子元素没有设置宽度：
那么整个父元素的width就是剩余宽度，这个时候可以正常使用flex-grow。

2、子元素设置了宽度：
如果子元素有宽度,那么这个时候flex-grow的作用就是把剩余空间=(父元素宽度-子元素总和宽度)按照flex-grow的数值分配给每一个子元素,这个时候flex-grow的作用就像是实实在在的width一样,给子元素增加宽度,在这种情况下的得到的效果就是一个无法改变的分配好的宽度,即使你子元素a的内容超出了分配好的宽度,也不会影响宽度分配情况,你只能用overflow来更好地美观一下啊,而这个就是我们希望的到的分配效果,代码如下:

.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://zhuanlan.zhihu.com/p/24372279