flex 布局，中间文字过长，会压缩左边图片的 width，求解为什么？

[sevenQu]

左边图片，中间文字，右边图标分别为 3 个 div
flex 布局后，变成了水平
左边 div 设置宽高，背景图宽高
中间文字部分仅设置了如下，让其显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

我找到了解决办法是将中间的的 div 设置为 flex：1，左右均可完整显示
但我的理解是，div 是水平排布的，如果是由于中间过长，也应该完整显示左边的图片，右边的图片被压缩，而事实是左边图片被压缩，求解为什么？

[noe132]

左边的 flex-shrink 设置成 0 没有？
宽度不够时，flex-shrink 不为 0 的子元素会被按照超过的宽度，以属性值为比例压缩。
如果希望元素在 flex 布局中不扩展也不被压缩，设置 flex: 0 0 auto 或者 flex: none 就可以了。

[lightening]

默认应该是等比缩放吧。文字应该也缩了，只不过文字缩了给省略号看起来不是很糟糕。
左边的图片和右边的图标应该给 flex-shrink: 0。中间的文字可以给 flex-shink: 1 (默认)，和 flex-grow: 1。

也可以用简写：左边和右边：flex: none （等于 0 0 auto) ; 中间文字: flex: auto (等于 1 1 auto ）;

这个关于 flexbox 的页面基本涵盖所有东西了： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[sevenQu]

@noe132 谢谢，明白了很感谢

[sevenQu]

@lightening 嗯嗯，谢谢，明白了，原来是这样