当父容器为 column 方向的 flex 布局时，即使子元素（如 svg）设置了固定宽高，新增同级元素仍会导致其被压缩——这是因 flex 默认启用 flex-shrink，需显式禁用或调整弹性行为。
当父容器为 column 方向的 flex 布局时，即使子元素（如 svg）设置了固定宽高，新增同级元素仍会导致其被压缩——这是因 flex 默认启用 flex-shrink，需显式禁用或调整弹性行为。
在 Flex 布局中，flex-shrink: 1 是所有弹性子项的默认值，意味着当容器空间不足时，子元素会按比例主动收缩以适应布局。你的 .parent 使用了 flex-direction: column 和固定高度 200px，初始仅含一个 SVG（高 50px），空间充裕；但一旦通过 prepend() 插入 .my-div（height: 100% 即 200px），两个子项总“期望高度”远超容器可用空间（200px + 50px = 250px），此时 Flex 引擎触发收缩机制——SVG 作为可缩放项被压缩，而非 .my-div 被截断。
✅ 正确解法是阻断 SVG 的收缩行为：
svg {
flex-shrink: 0; /* 关键：禁止压缩 */
}
该声明确保 SVG 始终保持其固有尺寸（由 width/height 属性或 CSS width/height 定义），而剩余空间由 .my-div 自适应分配（若需严格占满剩余高度，可进一步设 flex: 1）。
⚠️ 注意事项：
- ❌
flex-wrap: wrap并非推荐解法：column 布局下换行无法解决垂直空间冲突，且可能引发不可预测的布局断裂； - ❌ 仅设
.my-div { height: 100% }无效：百分比高度在 Flex 子项中依赖父容器明确高度（已满足），但不改变 shrink 行为； - ✅ 若需更精细控制，可统一使用 Flex 缩放属性：
.my-div { flex: 1; } /* 占据剩余全部空间 */ svg { flex: 0 0 50px; } /* 不伸展、不收缩、基准高度 50px */
总结：Flex 子项尺寸变化本质是弹性算法的预期行为，而非 bug。理解 flex-shrink 的默认作用，并针对性设置 flex-shrink: 0 或完整 flex 值，是保障关键元素尺寸稳定的核心实践。
