How to reduce font size and make a line break in a fixed sized input area?

I’m getting a result where my input box is being static with old numbers when it’s overflown, newly typed nunmbers are not appearing at all. here is my code:

<!DOCTYPE html>
<html>
<body>

 <input type="text" id="output-area" placeholder="0"  oninput="responsiveFont()" style=" width: 225px;
    height: 80px;
    font-size: 40px;
    text-align: right;
    pointer-events: none;">
<br><br>
<button onclick="Addition('1')">1</button>
<button onclick="Addition('2')">2</button>
<button onclick="Addition('3')">3</button>
<br><br>
<button onclick="clearAll()" style="background: red; color: white;">AC</button>
<button class="symbol"  onclick="del()">del</button>

 <script>
 let output_area = document.getElementById('output-area');
 function Addition(newValue){
            output_area.value += newValue;
        }
        
    function clearAll(){
            output_area.value = "";
        }
    function del (){
            output_area.value = output_area.value.slice(0, -1);
        }     

</script> 

</body>
</html>

All i want is when the input box is being overflowed, take a line break then reduce the font size and display numbers in 2 lines and so on maybe max 3 lines. I have tried using this function:

  function responsiveFont (){
        output_area.addEventListener('input', () => {
    if (output_area.scrollWidth > output_area.clientWidth) {
    const fontSize = parseInt(window.getComputedStyle(output_area).fontSize);
    output_area.style.fontSize = `${fontSize - 10}px`;
  }
});

}

But it seems not working the way i want. but if i change the

pointer-events: none;

pointer-events: normal;

it works but only after deleting anything from the overflown input field manually.
Thanks in advance for helping.