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
标签：flex,宽度,CSS,设置,失效,默认值,div2,div1 From： https://www.cnblogs.com/zhanglw456/p/16833488.html