Flex布局下长文本致圆形图片挤压变形，如何修复？

问题根源在于flex布局的默认行为：flex子项的flex-shrink属性默认值为1，当父容器空间不足时，所有子项会按比例收缩。文本过长时会挤压图片，导致图片宽度被压缩变形。

直接给图片添加flex-shrink: 0属性，就能阻止它被压缩，保持固定宽高：

<button style="display: flex; background-color: transparent; margin: 0px; padding: 0px; cursor: pointer; border-width: 0px;align-items: center;width: 140px;">
<img  style="width: 32px;height: 32px;object-fit: contain;max-height: 32px;margin-right: 0.25rem;background-color: rgb(238, 238, 238);justify-content: center;align-items: center;display: flex;border-radius: 100%;flex-shrink: 0;">
<span>Word biggger_word</span>
</button>

另外也可以给图片套一个固定宽高的容器，同时给容器设置flex-shrink: 0，效果一致：

<button style="display: flex; background-color: transparent; margin: 0px; padding: 0px; cursor: pointer; border-width: 0px;align-items: center;width: 140px;">
<div style="width:32px;height:32px;flex-shrink:0;margin-right:0.25rem;">
<img  style="width: 100%;height: 100%;object-fit: contain;background-color: rgb(238, 238, 238);justify-content: center;align-items: center;display: flex;border-radius: 100%;">
</div>
<span>Word biggger_word</span>
</button>

这样不管文本多长，图片都会保持32x32px的圆形，不会被挤压变形。

内容的提问来源于stack exchange，提问作者Thiago Moreira