flex布局踩过的坑：flex速记设置flex-grow和直接设置flex-grow的浏览器表现差异

今天看网上讲的二列布局，左侧宽度不固定，右侧宽度自适应的实现，其中有一例，code如下：

HTML代码：

    
左列不定宽
    
右列自适应

CSS代码：

#parent{
    display: flex;
}
#left { /*不设宽度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
    

flex: 1;

/*均分#parent剩余的部分*/}

作者：sweet_KK

链接：https://juejin.im/post/5aa252ac518825558001d5de
来源：掘金
谢谢sweet_KK大大的好文，侵删，谢谢。

这个代码在Chrome 66下的表现为：

但是当我把代码的

flex: 1  // 改动成 ==> flex-grow:1

结果变成了

像这样，不再是右侧自适应了，当没有了空闲距离，二者因为内部字数相同，居然开始平分剩下的空间了？？？

what？难道flew：1不是和flew-grow：1一个意思么？

于是我又试了试...

先是flex：0.5：

然后是flex-grow：0.5：

另，在firefox中也是如此。

可以很明显的观察出，当时flex的时候，设置这个属性的flex项目不算，剩余空间的一半一直等于他的宽度，直到无法溢出了为止。但是flex-grow的时候呢？却是把本身就应该占据的空间除了外，剩下的空间再占一半。当没有剩余空间了，他就回归了本来的宽度，并且与左侧平分天下。

顺路一提，在flex下设置overflow：hidden之后会压缩到0，但flex-grow下仍然没用。

我认为就是浏览器对这两个属性的表现有所不同，如有高人踩过同一个坑，请不吝赐教！