在 flex 布局中，svg 默认不响应 `height` 或 `flex` 尺寸约束，易导致溢出；通过组合 `h-full w-full` 类与 `preserveaspectratio="none"` 属性，可强制 svg 拉伸填充父容器，同时避免高度溢出。
当将 SVG 嵌入 Flex 容器（如 Tailwind 的 flex + flex-1）时，其默认行为是按 viewBox 自主计算尺寸，忽略父级高度限制，从而造成垂直溢出——即使父容器设置了明确高度（如 h-80），SVG 仍可能撑开布局。
解决关键在于两点：
- 显式赋予尺寸控制权：为
- 控制缩放行为：添加 preserveAspectRatio="none" 属性，允许 SVG 在宽高比不匹配时非等比拉伸，从而完全贴合父容器尺寸。
✅ 正确写法示例：
Container borderRight part
⚠️ 注意事项：
- preserveAspectRatio="none" 会牺牲原始宽高比，若 SVG 内含文字、图标或精细图形，可能导致视觉畸变；
- 若需等比缩放+居中裁剪（即 xMidYMid meet 行为），应移除该属性，并配合 object-fit: contain（需包裹在
或使用 background-image）；
- 确保 SVG 的父级（如 .flex-1）本身具有明确高度来源（如 h-80 或 flex: 1 在有高度的 flex 容器中），否则 h-full 无参照；
- 避免在 SVG 上设置内联 width/height 属性，它们会覆盖 h-full w-full 的 CSS 控制。
总结：Flex 中 SVG 高度失控的本质是其固有的“内在尺寸优先”机制。通过 h-full w-full 夺回尺寸控制权，再以 preserveAspectRatio="none" 显式声明拉伸策略，即可精准实现满高适配——这是响应式 SVG 布局中兼顾可控性与简洁性的推荐方案。
