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

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;
    }
  }
}

Answer 2

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...