SVG with width 100% overflows its container

Question

In the below snippet, adding the svg element causes a vertical scrollbar to appear. Removing the svg removes the scrollbar. I'd like to understand why its happening and whether there's a solution that isn't horrible (e.g. width:99%; height:98% solves it but thats a disgusting solution).

I can't really remove the upper DIV styling because other html structures also sit in these containers that need those to be there.

.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>

The green border and box sizing on the svg is only there so we can see the edge of the svg, it won't be needed in the end

If I change the svg to a div, and make the svg css apply to that div instead, no scrollbar appears, so there seems to be something different about the svg element.

I've tested this in firefox and IE. Both show a scrollbar, but IE shows slightly more scrollable content

Abhishek Pandey · Accepted Answer · 2017-07-27T11:04:40.880

Svg is inline element, setting font-size: 0; to .menuquery will solve this

.menuquery {
    border: 1px solid #ccc;
    overflow: auto;
    box-sizing: border-box;
    font-size: 0;
}
.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>

Or you can set display:block to svg. Updated on your comment.

.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;
  display:block;
}

<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>

Ahh, so I'm just trying display:block on the svg element as that would seem to be more intuitive and less disruptive than setting a font size higher up — user2728841, Jul 27 '17 at 10:52
Of course, you can convert `svg` to `block` element, but if element is `inline` then `font-size` is best option. — Abhishek Pandey, Jul 27 '17 at 10:55
Thanks, the svg doesn't need to be inline as it will never have neighbouring elements, so in this case I think both are good solutions. I can confirm that display:block also worked. — user2728841, Jul 27 '17 at 10:57
your solutions work well, I still don't understand why an inline svg causes the vertical scrollbar to appear ? — Olivier Boissé, Jun 29 '19 at 18:13
@OlivierBoissé Inline elements are treated as text in HTML, therefore they have `tracking and kerning` that makes spaces and text looks readable. — Abhishek Pandey, Jul 01 '19 at 04:45

score 1 · Answer 2 · answered Jul 27 '17 at 10:42

Remove overflow: auto; from .menuquery:

.menuquery {
  border: 1px solid #ccc;
  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>

Thanks, that seems to work, but I'll push it back to the main code before marking as answer, since I only added that to debug the issue of the svg being wider than its containers (so I'm rather surprised that the problem has gone away now !!). Any idea why this happened? thanks — user2728841, Jul 27 '17 at 10:48

SVG with width 100% overflows its container

2 Answers2