[css]flex定位图片被自适应文字挤压

[css]flex定位图片被自适应文字挤压

problem

flex定位

• 左边图片 固定宽度 80px
• 右边文字 宽度自适应

问题

• 右边文字少，只有1行的时候，图片宽度是80px固定不变
• 右边文字多，只有2/3行的时候，图片宽度会变小56px
  

reason

左边被挤压了
flex 元素的收缩规则，flex-shrink 默认值是 1
当子元素超出父元素，则自适应区域会挤压其他区域

solution

左边图片设置样式：flex-shrink:0;
不是不能被挤压