【css中flex属性】固定宽度被挤压 flex为1的元素宽度超出父元素

场景： 元素分为左右两块，左边元素定宽，右边元素自动充满屏幕。

flex布局中设置宽度被压缩的问题

当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩，解决方法: 给固定宽度的元素添加flex-shrink:0。

flex-shrink
指定了 flex 元素的收缩规则。

设置flex属性时子元素宽度超出父元素

设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。

解决方案：给右侧设置了flex:1;的元素，同时设置width:0

.right {
    width: 0;
    flex: 1;
}