title: How to make the SVG element stretch vertically just right?
body: <p>My problem is captured in the following fiddle: <a href="https://jsfiddle.net/byer5pfq/" rel="nofollow noreferrer">https://jsfiddle.net/byer5pfq/</a>
  I'm trying to implement the rendering of mathematical expressions with pure html/css and I need the square root to stretch vertically depending on the argument - so I resorted to SVG for auto-stretching. However, when the argument of the square root is not tall enough, the SVG still stretches to 150px (<a href="https://stackoverflow.com/questions/36673974/why-does-100-equal-150-pixels">Why does 100% equal 150 pixels?</a>). I'm using a table because the table layout typically enables you to match content heights.</p>
  
  <p>Any suggestions on how to accomplish our goal would be greatly appreciated!</p>
  
  <pre><code>&lt;span class="equation" style="display:inline"&gt;
    &lt;table class="root" cellspacing="0"&gt;
      &lt;tr&gt;
            &lt;td&gt;
                &lt;svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none"&gt;
                    &lt;text x="0" y="6.5" font-size="9px"&gt;&amp;#8730;&lt;/text&gt;
                  &lt;/svg&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;span class="root-argument"&gt;
                    &lt;span class="variables"&gt;Ax&lt;/span&gt;
                &lt;/span&gt;
            &lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/span&gt;
  
  .equation {
    font-size: 30px;
  }
  
  svg {
    display: inline-block;
  }
  
  span.variables {
    vertical-align: middle;
  }
  
  span {
    display: inline-block;
    vertical-align: middle;
  }
  
  tr {
    margin: 0;
    padding: 0;
  }
  
  td {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
  }
  
  span.root-exponent {
    height: calc(70% + .6em);
    font-size: .6em;
    vertical-align: bottom;
    text-align: right;
    margin-right: -1em;
    width: 1em;
  }
  
  table.root {
    /*    position: relative; */
    display: inline-block;
    vertical-align: middle;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
  }
  
  svg.root-symbol {
    vertical-align: middle;
    width: .9em;
    height: 100%;  /* Need it to strech when .root-argument is tall!!! */
  }
  
  span.root-argument {
    margin-left: -1px;
    padding-top: .05em;
    /* Clearance for the bar */
    padding-left: .1em;
    /* A little space on the left */
    padding-right: .2em;
    /* A little more on the right */
    border-top: 0.073em solid black;
    /* that's the bar */
    height: 100%;
  }
  </code></pre>