html - 幅 100% の SVG がコンテナからはみ出す

Question

以下のスニペットでは、svg 要素を追加すると、垂直スクロールバーが表示されます。svg を削除すると、スクロールバーが削除されます。なぜそれが起こっているのか、そしてひどくない解決策があるかどうかを理解したいと思います（たとえば、幅：99％、高さ：98％はそれを解決しますが、それは嫌な解決策です）.

上部の DIV スタイリングを実際に削除することはできません。他の html 構造もこれらのコンテナー内に存在する必要があるためです。

.menuquery {
  border: 1px solid #ccc;
  overflow: auto;
  box-sizing: border-box;
}

.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>

svg の緑の境界線とボックスのサイズ変更はそこにあるだけなので、svg の端を見ることができます。最終的には必要ありません。

svg を div に変更し、代わりに svg css をその div に適用すると、スクロールバーが表示されないため、svg 要素に何か違いがあるようです。

私はFirefoxとIEでこれをテストしました。どちらもスクロールバーを表示しますが、IE ではスクロール可能なコンテンツがわずかに多く表示されます