在 flex 布局中，svg 默认不响应 `height` 或 `flex` 尺寸约束，易导致溢出；通过组合 `h-full w-full` 类与 `preserveaspectratio="none"` 属性，可强制 svg 拉伸填充父容器，同时避免高度溢出。
当将 SVG 嵌入 Flex 容器（如 Tailwind 的 flex + flex-1）时，其默认行为是按 viewBox 自主计算尺寸，忽略父级高度限制，从而造成垂直溢出——即使父容器设置了明确高度（如 h-80），SVG 仍可能撑开布局。
解决关键在于两点：
- 显式赋予尺寸控制权：为 <svg> 添加 h-full w-full（Tailwind）或对应 CSS height: 100%; width: 100%，使其受父容器 flex 分配结果约束；
- 控制缩放行为：添加 preserveAspectRatio="none" 属性，允许 SVG 在宽高比不匹配时非等比拉伸，从而完全贴合父容器尺寸。
✅ 正确写法示例：
<div class="relative container h-80 mx-auto bg-green-200 p-5 flex">
<div class="absolute top-0 font-semibold">Container border</div>
<div class="flex-1 bg-red-200">
<svg
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
preserveAspectRatio="none"
>
<rect x="0" y="0" width="200" height="100" fill="#f87171" />
</svg>
</div>
<div class="bg-blue-200 font-bold px-4 py-2">Right part</div>
</div>⚠️ 注意事项：
- preserveAspectRatio="none" 会牺牲原始宽高比，若 SVG 内含文字、图标或精细图形，可能导致视觉畸变；
- 若需等比缩放+居中裁剪（即 xMidYMid meet 行为），应移除该属性，并配合 object-fit: contain（需包裹在 <img> 或使用 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 布局中兼顾可控性与简洁性的推荐方案。
