通过为 svg 添加 `h-full w-full` 类并设置 `preserveaspectratio="none"`，可强制其完全填充父容器高度（同时拉伸宽度以适配），避免溢出；但需注意该方式会破坏原始宽高比，适用于背景图或无比例敏感内容的场景。
在使用 Flexbox 布局（尤其是 Tailwind CSS 的 flex 容器）时，嵌入的 SVG 默认不会自动响应父容器的尺寸约束——即使父元素设置了明确高度（如 h-80），SVG 仍会依据其 viewBox 和内部坐标系按固有比例渲染，导致内容溢出或未填满。
核心解决方案如下：
-
显式赋予 SVG 尺寸控制类
为 <svg> 元素添加 h-full w-full（Tailwind），使其继承父 flex 项的高度与宽度：<svg class="h-full w-full" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <rect x="0" y="0" width="200" height="100" /> </svg>
-
关键属性：preserveAspectRatio="none"
- 默认值 xMidYMid meet 会保持宽高比并居中缩放，易导致留白或裁剪；
- 设为 "none" 后，SVG 内容将强制拉伸以完全贴合容器尺寸（即“拉满填充”），实现真正的 100% × 100% 占据。
⚠️ 注意：此设置会使图形失真（如圆形变椭圆、文字变形），仅推荐用于纯装饰性、无语义精度要求的 SVG（例如背景色块、渐变遮罩、抽象图形）。
-
确保父级 flex 项具备高度上下文
示例中 .flex-1 的红色区域必须能正确接收高度分配。若父容器（.container）未定义明确高度（如 h-80），或其 flex 方向/对齐方式干扰了高度传递（如 align-items: flex-start），SVG 仍将无法生效。建议检查：- 父容器是否设定了 height 或 min-height；
- 是否存在 overflow: hidden 遮盖溢出（仅隐藏问题，非解决）；
- 避免在 SVG 外层额外包裹无样式 <div> 干扰 flex 流。
✅ 最佳实践组合：
<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">
<!-- 关键：h-full w-full + preserveAspectRatio="none" -->
<svg class="h-full w-full" viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none">
<rect x="0" y="0" width="200" height="100" fill="#fca5a5" />
</svg>
</div>
<div class="bg-blue-200 font-bold px-4 py-2">Right part</div>
</div>? 替代方案（保持宽高比）：
若需严格维持 SVG 比例（如图标、图表），应改用 object-fit: contain 配合 img 标签加载 SVG，或使用 max-h-full max-w-full + m-auto 居中，但此时无法“撑满”容器——需根据设计目标权衡取舍。
