Canvas在Flex中需设min-width: 0并用ResizeObserver监听父容器，同步canvas.width/height与style.width/height；SVG须保留viewBox、移除宽高属性、设preserveAspectRatio="xMidYMid meet"且wrapper加min-width: 0。
Canvas在Flex容器里不随父容器缩放，必须同步width/height属性
Canvas是替换元素，它的绘图分辨率由HTML的width和height属性决定，不是CSS的style.width或style.height。Flex把Canvas拉到800×600的布局区域，但只要canvas.width还是300、canvas.height还是150，浏览器就只能把300×150的像素缓冲区强行拉伸进去——结果就是模糊、坐标错位、鼠标点不准。
- 用
ResizeObserver监听canvas.parentElement（不是canvas自己），因为Flex变化的是父容器尺寸 - 回调里取
entries[0].contentRect，别用canvas.clientWidth：前者是渲染后的真实CSS像素尺寸，后者会受transform、滚动、border-box误差干扰 - 设
canvas.width = Math.floor(rect.width)、canvas.height = Math.floor(rect.height)，必须是整数，否则高DPI设备下可能触发亚像素重采样 - 同步设置
canvas.style.width = "100%"和canvas.style.height = "100%"，否则父Flex项可能因尺寸未收敛而抖动 - 重绘前调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，再执行你的draw()逻辑
SVG在Flex中路径错位，关键看viewBox和preserveAspectRatio
没viewBox的SVG会被当固定像素位图处理；有viewBox但CSS宽高比不匹配，就会裁切或拉伸。比如viewBox="0 0 24 24"却设width: 48px; height: 32px，宽高比2:1 vs 3:2，浏览器只能靠preserveAspectRatio硬凑。
- 必须保留
viewBox，且数值对应原始设计画布（如Figma导出通常是"0 0 24 24"） - 删掉SVG标签上的
width和height属性（哪怕写"100%"也不行），让CSS完全接管尺寸 - 显式写
preserveAspectRatio="xMidYMid meet"：居中对齐 + 等比缩放 + 完整显示，避免旧版Safari退化为slice - 给
<svg></svg>加display: block，消除inline布局下的vertical-align和line-height干扰 - 需要微调位置时，用
margin或top/left配position: relative，别碰vertical-align
Flex子项本身缩小时变形，根源常是min-width: auto
Flex项目默认带min-width: auto，意思是“不能比内容最小宽度还小”。图片、Canvas、SVG这些替换元素的内容最小宽度就是其固有尺寸，一旦父容器变窄，它们就被卡住，被迫拉伸变形——这不是flex-shrink的问题，而是第一层约束没放开。
- 给Flex子项（比如包裹Canvas的
<div>）加<code>min-width: 0，切断这个隐性限制 - 如果子项直接是
<canvas></canvas>或<svg></svg>，还要补上width: 100%和height: auto（SVG需配合aspect-ratio） - 别只靠
overflow: hidden遮掩，它不阻止拉伸，只藏起溢出部分 - 检查DevTools的Computed面板，确认
flex-basis解析值是不是auto而非预期像素值 - Canvas容器要设
position: relative，否则getBoundingClientRect()读出来的是相对于body的尺寸 - SVG别直接设
flex-shrink: 0——它对<svg></svg>本身无效，真正该设的是包裹它的<div class="icon-wrapper"> <li>SVG wrapper加<code>min-width: 0和width: 100%，并确保父级有明确宽度（如flex-basis） - Canvas高DPI适配必须同步
window.devicePixelRatio：用canvas.width = Math.floor(rect.width * dpr)，再ctx.scale(dpr, dpr) - 避免在SVG上设
object-fit——它对内联<svg></svg>完全无效
iOS Safari里Canvas/SVG响应失效，得绕开几个坑
部分iOS Safari（尤其是15.x–16.x）在Flex容器里用transform或flex: 1时，Canvas的touchstart事件可能不触发，或者clientX/clientY返回0；无明确width的内联SVG也可能被忽略max-width: 100%，卡死原始尺寸。
立即学习“前端免费学习笔记（深入）”；
实际调试时最容易漏掉的是min-width: 0和ResizeObserver监听对象选错这两处。前者让Flex子项“愿意缩小”，后者让Canvas/SVG“知道该缩多少”——缺一不可。
