multiline flexbox fontsize problem

by plagasul

HTML

<div>
  <ul class="container">
   <li>1</li>
   <li>2</li>
   <li>multiline becomes a problem with this approach</li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 1px red solid;
}

JavaScript

// Calculate aprox right font size using number of li, and apply to container ul; changing number of li should adapt font size
var lis = document.querySelectorAll('li')
var fontsize = (100 / lis.length) * 0.8;
document.querySelector('.container').style.fontSize = fontsize + "vh";