change font size based on specific width with CSS (or at least JS)

I want to resize font-size based width of div container like this snippet:

.container {
  background-color: green;
  width:100px;
  height: 30px;
  color: yellow;
  font-size: 30px;
}

<div class=container>short</div>
<br>
<div class=container style="font-size: 23px;">middlemid</div>
<br>
<div class=container style="font-size: 18px;">longlonglong</div>

In my actual code short, middlemid, etc are dynamic values comes from API and container div is a same element with static width value. Maximum font-size is 30px but if text value is overflowing, font-size should be rescaled to match the div width.

Is it possible to do with CSS?
Actually JavaScript is also Okay but, all solutions that I found has more 15-20 lines of code or using external libraries, what is looks like overhead. Isn’t here no simple solution for this basic case?