仅设置父容器高度时SVG适配异常及flex生效原理问询

先看你给出的问题代码：

<div style="height: 24px;">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="50%" fill="blue"/>
    <rect x="0" y="50%" width="100%" height="50%" fill="green"/>
  </svg>
</div>

这段代码里SVG无法适配容器高度，但仅设容器宽度时显示正常，只有display:flex能解决问题，本质是不同布局模式下浏览器对替换元素（SVG属于替换元素）的尺寸计算逻辑差异，以下是各display属性的具体作用区别：

1. 默认block容器的行为 #

容器默认是display:block，此时浏览器对SVG的尺寸计算逻辑：

• SVG作为替换元素，自带由viewBox推导的1:1固有宽高比
• 当容器仅设置高度、未设宽度时，浏览器会优先按SVG的固有宽高比计算宽度，再基于宽度确定SVG高度——但容器高度固定为24px，这就导致SVG的高度无法匹配容器，出现适配失效。

2. display:flex容器的行为 #

当容器设为display:flex时，flex布局的特性会强制SVG适配容器空间：

• flex布局默认align-items:stretch，会让子元素在垂直交叉轴上拉伸填满容器高度
• 同时，flex子元素会忽略自身固有尺寸的优先级，优先响应容器的尺寸约束，SVG会自动调整宽度以维持viewBox的1:1比例，最终高度刚好匹配容器的24px，实现正确适配。

3. 其他display类型的表现 #

inline/inline-block容器 #

这类容器的尺寸由内容决定，仅设置容器高度无法强制SVG适配：SVG依然按自身固有尺寸渲染，高度不会匹配容器设置值；另外inline-block默认垂直对齐为baseline，还可能出现额外间距，加剧布局错位。

grid容器 #

和flex类似，display:grid容器默认align-items:stretch，子元素会在网格单元格中拉伸，同样能让SVG适配容器高度，但需注意网格布局的其他属性（如grid-template）可能带来的影响。

总结：要让SVG在仅设高度的容器中适配，核心是利用flex/grid这类弹性布局的拉伸规则，强制替换元素响应容器尺寸；而传统block/inline布局依赖元素自身固有尺寸，无法直接实现仅设高度下的自动适配。

内容的提问来源于stack exchange，提问作者daggett