I have a function that proportionately reduces the font size if there is a scroll bar detected, ie, if there is enough content to trigger a scrollbar.

```js
window.onload = function(e) {
  if (document.body.scrollHeight > document.documentElement.clientHeight) {
    document.body.style.fontSize = "7px";
  }
  console.log(document.body.scrollHeight);
  console.log(document.documentElement.clientHeight);
}
```

```css
body {
  color: black;
  font-family: 'Open Sans', sans-serif;
  padding: 40px;
  font-size: 10px;
}

li {
  font-size: 4.5em
}
```

```html
<div class="content">
  <ul>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <!--if more stuff added - reduce the font size the right amount so there's is no scroll bar present.-->
  </ul>
</div>
```

But as you can see I currently am setting a static font size of 7px, no matter the amount of content on the page. What I am trying to achieve is calculate the maximum font size the content can have, without triggering a scroll bar, depending on the content in the page.

How can I achieve this?