今天看网上讲的二列布局，左侧宽度不固定，右侧宽度自适应的实现，其中有一例，code如下：
HTML代码：
<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>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下仍然没用。
我认为就是浏览器对这两个属性的表现有所不同，如有高人踩过同一个坑，请不吝赐教！
扫一扫
1417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
