Why does 100% equal 150 pixels?

Question

The following code results in a table that 150 pixels tall. Why 150? Is this an SVG quirk or something more general?

https://jsfiddle.net/cc9tyw5v/31/

Answer 1

The span you are attempting to fit the height of is not the parent of the SVG. It is a sibling, and therefore height:100% will not fit its height.