用CSS包装svg元素

Question

我想制作一个svg元素包装器以动态调整其大小。我在包装器svg类所应用的元素的div中使用了svg-wrapper。我的CSS看起来像这样：

.svg-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: top;
  overflow: hidden;
  background-color: gray;
}

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  fill: red;
}

还有html，

<div class="svg-wrapper">
  <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 300 100">
    <rect width="100%" height="100%" fill="blue"/>
  </svg>
</div>

JSFiddle上的示例：http://jsfiddle.net/a2nj971t/

但是，您可以看到div不能从下面包装svg的问题。是否可以修复它（与svg的大小无关）？