I want to make a simple calculator-like app. I created a div with an ID of display and three buttons that enter numbers 1,2,3. The numbers are displayed next to each other. However, when they hit the edge of the container they just don't wrap. How to make the entered numbers wrap to the next line? I tried: display: flex; flex-wrap: wrap; but it didn't work. I guess overflow:hidden; doesn't work either because it only hides the content.

  <div id="display"></div>
    <div class="keypad">
      <button id="btn1" onclick="press1()">1</button>
      <button id="btn2" onclick="press2()">2</button>
      <button id="btn1" onclick="press3()">3</button>
  </div>

  #display {
    width: 300px;
    height: 100px;
    background-color: gold;
    border: 1px solid black;
  }

  .keypad {
    width: 300px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid orangered;
  }

  button {
    width: 97px;
    height: 97px;
    border: 0;
    outline: 0;
  }

  let numberEntered = "";
  const display = document.querySelector("#display");
  console.log(display);

  function press1() {
    numberEntered = 1;
    display.textContent += `${numberEntered}`;
  }

  function press2() {
    numberEntered = 2;
    display.textContent += `${numberEntered}`;
  }

  function press3() {
    numberEntered = 3;
    display.textContent += `${numberEntered}`;
  }