I am new to coding so I hope this is not too unclear:

I am learning Javascript, CSS and HTML through making a simple HTML calculator of which the display is a textarea (unless there is a better option for what I describe below).

I would like the contents of the textarea to be the same height as it at first, becoming smaller as the numbers require more width. However, I would like there to be a particular text size at which it begins to wrap (break onto the next line) without overflow. Ideally, the text would continue to get smaller and wrap onto more lines in order to fit in the textarea (this may not be practical for a real calculator, but this is also an exercise in design).

I have tried a few ways with word-break, word-wrap and overflow-wrap but none have had any effect, I imagine it might require some script as well and maybe some a more nuanced definition of the textarea size.

This may be complex or too ambitious but I would like to see if it is possible first! Thanks a lot in advance.