CSS - flex布局中子元素设置宽度失效

1 使用情景

box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。
简单来说就是要求，div2固定宽度，div1宽度自适应占满剩余空间。

2 问题

div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。

3 原因

原因主要在于flex的flex-grow和flex-shrink属性

flex-grow: 默认值是0，表示放大比例，如果存在剩余空间，也不放大。
flex-shrink: 默认值是1，表示缩小比例，如果空间不足，该项目就会缩小。

如果没有设置这两个属性，那么取的就是默认值。当div1内容很长时，div2的宽度就会被缩小。
解决方案其实也很简单，只需要给div2设置 flex-shrink: 0 即可。表示空间不足的情况下，div2也不缩小。

https://blog.csdn.net/weixin_38629529/article/details/123010917