设置100%宽高的SVG被DIV包裹时为何出现溢出问题？

核心原因 #

问题出在Grid容器的auto轨道尺寸计算逻辑，以及块级容器与SVG的尺寸交互方式：

• 无中间DIV时，SVG作为Grid直接子元素，Grid的auto轨道会直接响应SVG的width:100%;height:100%设置，将轨道尺寸匹配Grid容器的100%宽高，SVG完美填满无溢出。
• 添加中间DIV后，Grid的auto轨道会优先计算DIV内容（SVG）的固有宽高比（SVG的viewBox是100x100，默认宽高比1:1）。当视口宽度远大于高度时，SVG的宽度被拉伸到100%（对应Grid容器宽度），其高度会因固有1:1比例被同步拉伸至等于宽度，这个值会超过Grid容器的高度（100vh），导致Grid轨道被撑开，SVG最终溢出容器。

你尝试的display:block无效，是因为这个问题的根源不是SVG的基线对齐间隙（常见的SVG底部空白问题），而是Grid轨道和块级容器的尺寸计算逻辑冲突。

解决方案 #

最直接的修复是修改Grid容器的轨道设置，从auto改为1fr，强制轨道占据整个可用空间，约束中间DIV的尺寸不会被内容撑开：

.svg-outer-container{
  display: grid;
  grid-template-rows: 1fr; /* 替换auto */
  grid-template-columns: 1fr; /* 替换auto */
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

另外，也可以给中间DIV设置display: grid或display: flex，让它的布局逻辑强制子元素（SVG）填充自身尺寸：

.svg-inner-container {
    width: 100%;
    height: 100%;
    display: grid; /* 或flex */
}

验证代码（修复后） #

<div class="root">
  <div class="svg-outer-container">  
    <div class="svg-inner-container"> 
      <svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <polygon points="50,0 100,50 50,100 0,50"/>
      </svg>
    </div> 
  </div>
</div>

.root{
  width: 100vw;
  height: 100vh;    
}

.svg-outer-container{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

.svg-inner-container {
    width: 100%;
    height: 100%;
}

.svg{
  width: 100%;
  height: 100%;
  background: lightgreen;
}

polygon {
  fill: skyblue;
  stroke: purple;
  stroke-width: 1;
}

body {
  margin: 0;
}

* {
   box-sizing: border-box;
}

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