Search code examples
htmlcsssag

DIV doesn't recognize inner SVG

Why doesn't the <div> expand automatically to the height of the inner <svg> in the following scenario?

CSS

    #curve-svg {
  height: auto;
  max-width: 400px;
  position: relative;
  border: 1px solid red;


  svg {
    position: absolute;
    width: 100%;
    max-width: 400px;
    height: auto;
  }
}

HTML

<div class="pure-u-1" id="curve-svg">
  <svg id="svg" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">

    <path id="curve" style="fill:none;stroke-width:0.35px;stroke:#333;" d="blah" blah blah/>
  </svg>
</div>

I am using PURE.css, if that makes any difference, but I haven't found anything in PURE.css yet that would prevent the div's height from expanding; this was also an issue on Bootstrap 3 and Bootstrap 4.

Any and all help or suggestions are immensely appreciated!

Solution

  • What's causing this is the height="100%" attribute on the svg element. Give it a specific height (e.g. in pixels). Then it will size correctly. Here's an example.