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

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
I have a very basic Bootstrap 4 grid like this:
<div class="container mt-4">
<div class="row">
<div class="col border"><div class="tile"><span>A</span></div></div>
<div class="col border"><div class="tile"><span>B</span></div></div>
...
...
</div>
<div class="row">
<div class="col border"><div class="tile"><span>A</span></div></div>
<div class="col border"><div class="tile"><span>B</span></div></div>
...
...
</div>
...
...
</div>
And some CSS to make these into squares (using the padding-top: 100% trick):
.col {
padding: 0;
}
.col:not(:last-child) {
border-right: none !important;
}
.row:not(:last-child) .col {
border-bottom: none !important;
}
.tile {
padding: 100% 0 0;
font-size: 5vw;
}
.tile span {
position: absolute;
left: 0;
top: 50%;
line-height: 0;
width: 100%;
text-align: center;
}
The problem here is that 5vw makes the font just the right size on my 2560px wide viewport, but by the time I have reached the lower breakpoint, it not longer fills the cells. I'd like to avoid tonnes of media queries to "tune" it.
Is there any CSS-only way of saying "font-size = container_height"?
font-size: 100% seems to just set the font to the base size (not the parent size, like you'd expect height: 100% to do). Some goes for the likes of em's...
I've tried vh and that works fine until the viewport height changes (so same problem as vw).
I read something about vb (about the parent block), but that doesn't seem to work? I believe it is still only theoretical.
I am aware of JS-options which could calculate the height of a parent and set it... But I feel like this is something CSS should be able to do and I'm missing a piece of a puzzle.
Could the answer lie in transforms?! or calc()?
UPDATE: Possible answer using SVGs? https://stackoverflow.com/a/51333267/224707

Answer 1

One possible solution I have found is using SVG's...
https://codepen.io/njt1982/pen/EpVeYw
Each column becomes this:
<div class="col border">
<div class="tile">
<svg viewBox="0 0 20 20">
<text x="50%" y="14" text-anchor="middle">A</text>
</svg>
</div>
</div>
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...

Answer 2

Here you go:
https://codepen.io/sphism/pen/LBGmRm
Flexbox solution, scales with browser, works in both portrait and landscape, fonts scale, nice clean html, no svg's.
EDIT: added the size-* classes so you can easily change the grid size just by adding the class, eg .grid.size-4 would be a 4x4 grid.
html:
<div class="container">
<div class="grid size-7">
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
</div>
</div>
scss:
// 100 would have no space around it
// $gridSize: 90vw; // Works in portrait.
// $gridSize: 90vh; // Works in Landscape.
$gridSize: 90vMin; // Works in both.
.container {
// Full size of page
height: 100vh;
width: 100vw;
// Center the grid x and y
display: flex;
align-items: center;
justify-content: center;
}
.grid {
// Grid will center in container if you want a bit of space around it.
height: $gridSize;
width: $gridSize;
// This is how we make the grid
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
}
// Styles for all tiles
.tile {
display: block;
border: 1px solid gray;
text-align: center;
box-sizing: border-box;
}
// Number of rows and columns.
// $size: 8;
#for $size from 1 through 8 {
// eg 100/8
$tileSize: $gridSize / $size;
// Half th esize of the tile, or whatever you want.
$fontSize: $tileSize * 0.5;
.size-#{$size} {
.tile {
// Constrain the tiles to exact size we want.
width: $tileSize;
min-width: $tileSize;
max-width: $tileSize;
height: $tileSize;
min-height: $tileSize;
max-height: $tileSize;
flex-basis: $tileSize;
// Set fonts to same line height as tile, center them and set font size.
line-height: $tileSize;
font-size: $fontSize;
}
// Just hide extra divs so it renders properly.
$maxTiles: $size * $size + 1;
.tile:nth-child(n + #{$maxTiles}) {
display: none !important;
}
}
}