flex-shrink: 0单独使用无效，必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能确保图片等替换元素按固有尺寸渲染并保持宽高比。
直接设 flex-shrink: 0 很容易失效——它只跳过收缩计算，不定义尺寸起点，也不解除浏览器对内容的隐式保护。真正起效需要配合关键属性，按元素类型分情况处理。
图片/图标类替换元素：必须用 flex: 0 0 auto + min-width: 0
单独写 flex-shrink: 0 对 <img> 或 <svg></svg> 基本无效，因为：
- 它们是替换元素，默认
flex-basis会 fallback 到0（塌成一条线）或100%（横向拉伸、纵向坍缩） -
min-width: auto是隐藏锁，会拦截flex-shrink: 0的生效路径
正确写法：
img, svg {
flex: 0 0 auto; /* 禁增长、禁收缩、基准为固有尺寸 */
width: auto;
height: auto;
min-width: 0; /* 解除默认最小宽锁定 */
max-width: 100%; /* 防撑出容器 */
height: auto; /* 保宽高比 */
}
SVG 还需确保根元素有 preserveAspectRatio="xMidYMid meet"，避免被强制拉伸。
长文本容器：重点不是 flex-shrink: 0，而是 min-width: 0
文本撑破容器，通常不是“被压缩”，而是浏览器拒绝换行——因为它默认给 flex 子项加了 min-width: auto，宁可溢出也不压窄到能换行的程度。
解决方式是主动释放这个限制：
- 在文本所在直接子元素（比如
.content）上设min-width: 0 - 父容器要有明确宽度（
width或max-width），否则没有“可用空间”概念 - 删掉可能存在的
flex-shrink: 0—— 它会让文本彻底拒绝让步，反而加剧溢出 - 对无空格长串（如 URL、哈希），再加
overflow-wrap: break-word
示例：
.text-wrapper {
min-width: 0;
}
.text-wrapper p {
overflow-wrap: break-word;
}
带边框的元素（按钮、输入框等）：补全 box-sizing: border-box
border 在 box-sizing: content-box 下是额外加在 width 外的，导致实际占宽超预期，触发浏览器强制挤压（哪怕写了 flex-shrink: 0）。
必须三者齐备：
-
box-sizing: border-box—— 让 width 包含 border 和 padding -
flex: 0 0 auto或flex: 0 0 fit-content—— 明确禁用伸缩 -
min-width: 0—— 解除内容最小宽锁定
例如按钮：
button {
flex: 0 0 fit-content;
box-sizing: border-box;
min-width: 0;
white-space: nowrap;
}
侧边栏、Logo 等固定宽元素：用 flex: 0 0 200px 显式锚定
仅写 width: 200px 没用，Flex 中 width 只是建议值。必须把基准尺寸写进 flex-basis：
-
flex: 0 0 200px—— 不增长、不收缩、初始宽就是 200px - 避免写成
flex: 0 200px，这会被解析为flex-shrink: 200，反而压得更狠 - 小屏下若要响应式退场，应在媒体查询中改回
flex: 0 1 auto或切换布局方向
注意：IE11 需同时声明 width: 200px 和 flex-basis: 200px 才兼容。
