CSS: Scale font-size to fit parent block element height

Question

Almost every question and answer I have found talks about the viewport size; this isn\'t really my issues.

Take this Pen... https://codepen.io/njt1982/pen/pZjZNM

Answer 1

One possible solution I have found is using SVG's...

https://codepen.io/njt1982/pen/EpVeYw

Each column becomes this:

Then we drop all notion of font-size and do this:

.tile svg {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 0;
  width: 100%;
  height: 100%;
  fill: #333;
}

Seems to scale pretty well - I have not, however, browser tested it...