开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

你需要首先理解 flex:1,快去查 www.ruanyifeng.com/blog/2015/0…

背景

当我们用flex去实现两个div，左边固定宽，右边自适应的时候，有没有遇到一个设置子元素宽度失效的问题

当你的最外层box设置了display：flex，你再设置div1固定宽度，div2宽度自适应，正式时，也就是div2中内容没超长，是没问题的，一旦div2内容特别特别长就会压缩左侧div1的宽度，导致左边变小，固定宽度失效。

这其实是flex：1这种写法的问题，要明白他的组成结构

也就是他隐含了三个属性

1 flex-grow:1 //放大比例
2 flex-shrink:1 //收缩比例
3 flex-basis:auto //伸缩比例

flex-grow：当子容器的宽度小于父容器，就会产生剩余空间。(默认0)

设置0，即如果存在剩余空间，也不放大。

设置1，即剩余空间将会等比例分配给子容器。

设置2，如果其他子容器设置了1，则按2：1分配

flex-shrink：当子容器的宽度大于父容器时，就会产生一个缺少空间。如果不改，默认是1，即空间不足的时候子容器会等比例进行收缩。

当你使用flex：1时，他代表设置了flex-grow为1等分剩余空间， flex-shrink还是默认值，所以会产生上面的问题，超长造成子容器等比例收缩，设置子容器(div1)的宽度失效。

明白了这个问题解决方案就很简单了，

只需要给子容器(固定宽度的这个)设置flex-shrink：0即可，让他不收缩

终于赶上了掘金的更文活动，知识是学不完的，脚踏实地，基于业务学习，梳理好每个知识点，把做过的东西吃透，多多产出。

如果文章有错误请多多指出，感谢！