通过为 svg 添加 `h-full w-full` 类并设置 `preserveaspectratio="none"`，可强制其完全填充 flex 容器高度、保持宽高拉伸，避免内容溢出（注意：此方式会牺牲原始宽高比）。
在使用 Flex 布局（如 Tailwind 的 flex 容器）时，SVG 默认不会自动响应父容器的尺寸约束——它依据 viewBox 和内部坐标系独立渲染，常导致高度溢出或缩放异常。要使其严格贴合父容器高度并等比/拉伸填充宽度，需协同控制 CSS 尺寸与 SVG 渲染行为。
✅ 正确做法如下：
- 为 SVG 元素显式设置尺寸类：添加 h-full w-full（Tailwind）或对应 CSS height: 100%; width: 100%，确保其继承父级 .flex-1 区域的高度；
- 关闭宽高比保护机制：在
- 确保父级具有明确高度和 overflow: hidden（可选但推荐）：防止意外溢出干扰布局。
示例修复代码（基于原结构）：
Container borderRight part
⚠️ 注意事项：
- preserveAspectRatio="none" 会导致图形非等比拉伸（如圆形变椭圆、文字变形），仅适用于背景图、色块、图标轮廓等对比例不敏感的场景；
- 若需等比缩放并居中显示（即“contain”效果），应改用 preserveAspectRatio="xMidYMid meet" 并配合 object-fit: contain（需将 SVG 作为
引入）或使用 transform: scale() 手动计算；
- 避免在 SVG 内嵌复杂文本或精细图标时滥用 "none"，否则可读性与视觉质量将显著下降；
- 在 React/Vue 等框架中动态渲染 SVG 时，确保 preserveAspectRatio 作为属性而非字符串字面量正确绑定。
总结：h-full w-full + preserveAspectRatio="none" 是解决 Flex 容器内 SVG 高度溢出的直接有效方案，但本质是「强制拉伸」而非「智能适配」。根据设计需求权衡保真度与布局一致性，必要时可结合 CSS 容器查询（@container）或 JS 动态计算 viewBox 实现更精细控制。
