Как сделать адаптивный размер текста относительно ширины блока?

Question

Нужно менять font-size относительно длины текста, чтобы вписывался во всю ширину блока.

Как такое сделать, желательно без js?

.menu {
  width: 58px;
  border: 1px solid #ccc;
}
.menu a {
  display: flex;
  flex-direction: column;
  padding: 0.35em 0.15em 0.45em;
  border-bottom: 1px solid #4f4f4f;
  height: 48px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 100%; /* ??? */
}

<div class="menu">
  <a>Menu 1</a>
  <a>Menu 11</a>
  <a>Menu 122</a>
</div>

Answer 1

Можно с помощью svg

div {
  border: 1px solid;
  padding: 20px;
  width: 100px;
  resize: both;
  overflow: auto;
}
svg {
  width: 100%;
  height: auto;
}
text {
  transform: translate(10px, 50px);
  font-size: 62px;
  fill: #000;
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
      <text>TEXT</text>
  </svg>
</div>